I have 3 elements (with yellow background) that display monetary amounts.
Each counter is animated whenever the amount changes, so there is specific HTML/CSS code for each counter to handle the animation. Changing the underlying CSS will disrupt the animation functionality.
The problem I'm facing is aligning the counter elements with the yellow background properly. I want them to be centered just below the corresponding label for each counter. The labels have a style of padding-bottom:2px;
The first two counters are currently not positioned correctly in relation to the label above.
https://i.sstatic.net/cf1cp.png
The desired alignment of the elements can be seen here:
https://i.sstatic.net/sgdH5.png
This is the basic structure of the DOM (full HTML available at the provided link):
<div id="account_monitor">
<div class="account-monitor">
<div class="account-monitor-label">label</div>
<div class="amount counter" style="height: 21px">value</div>
</div>
<div class="account-monitor">
<div class="account-monitor-label">label</div>
<div class="amount counter" style="height: 21px">value</div>
</div>
<div class="account-monitor">
<div class="account-monitor-label">label</div>
<div class="amount counter" style="height: 21px">value</div>
</div>
</div>
#account_monitor{
display:flex;
gap:30px;
padding:10px;
}
.account-monitor{
min-width:130px;
text-align:right;
}
.account-monitor-label{
padding-bottom:2px;
text-align:center;
font-size:11px;
}
.counter{
display:inline-flex;
flex-direction:row-reverse;
align-items:flex-end;
overflow-y:hidden;
background:yellow;
}
.amount{
font-family:arial;
font-weight:bold;
font-size:15px;
text-align:right;
}
You can access the full HTML code through this link: