Location of the audio button

[kruglianin]

Hi all!
I hope you will have a free minute and my English with a translator will be able to explain my question properly.

I have attached 2 screenshots, where I have drawn with lines what I want to get in the end.

Is it possible to have the text fields absolutely always in the centre and the audio icon on the left?

Right now when adding audio my audio button is in the middle of the card and the text box moves a bit to the right.

Maybe you can tell me how to avoid this?
Thank you very much in advance!

here’s a link to the deck:
Link Deck

[hkr]

One way to accomplish what you want to do is to use CSS grid layout. If you are not familiar with HTML and CSS, this may sound complicated and difficult, but I can’t think of an easier way. You can try the following:

Screenshot

Card1 - Front Template

<div class="wrapper">
    <div class="sound">{{Sound}}</div>
    <div class="word">{{Word}}</div>
    <div class="spacer"></div>
    <div class="part">{{Part}}</div>
    <div class="ipa">{{IPA}}</div>
</div>

Card1 - Back Template

{{FrontSide}}

<hr id=answer>

<div class="translate">{{Translate}}</div>

Card2 - Front Template

<div class="translate">{{Translate}}</div>

Card2 - Back Template

{{FrontSide}}

<hr id=answer>

<div class="wrapper">
    <div class="sound">{{Sound}}</div>
    <div class="word">{{Word}}</div>
    <div class="spacer"></div>
    <div class="part">{{Part}}</div>
    <div class="ipa">{{IPA}}</div>
</div>

Styling

.card {
    font-family: arial;
    font-size: 20px;
    text-align: center;
    color: black;
    background-color: white;
}

.wrapper {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-items: center;
    column-gap: 8px;
}

.part,
.ipa {
    grid-column-start: 1;
    grid-column-end: 4;
}

.sound {
    justify-self: end;
}

.word {
    font-size: 60px;
}

.part {
    font-size: 40px;
    color: red
}

.ipa {
    font-size: 45px;
    color: green
}

.translate {
    font-size: 60px;
    color: red
}

[kruglianin]

My friend!
Thank you very much for your solution!