Two names with varying sizes

Hello everybody,

I recently started templating and wanted to have my cards two instances of "name" ('name' and 'name 2'), where the first instance has a width of 300 when there's no second name, but when there is a second name, the first changes to a width of 170. It feels like it should be easy to do but I'm still too inexperienced to find a solution. I fumbled with  auto-adjusting the first name's box's size with "{ 300 - card_style.name_2.content_width }" but that only has the name shrink to unreadabilty even though the "name 2" box has shrink-overflow enabled.

So anyway, this is where I'm at:


name:
        left: 20
        top: 22
        right: 190
        height: 30
        alignment: middle center shrink-overflow
        padding bottom: 0
        z index: 1
        font:
            name: forte
            size: 22
            color: black
name 2:
        left: 200
        top: 22
        right: 355
        height: 30
        alignment: middle right shrink-overflow
        padding bottom: 0
        z index: 1
        font:
            name: forte
            size: 16
            color: black

I appreciate your help. Thank you so much in advance!