inline-flex元素对齐异常求助：金额计数器无法与标签正确对齐

我有3个带黄色背景的金额计数元素，金额更新时计数器会触发动画，因此底层HTML/CSS不可修改（否则动画失效）。当前问题是黄色背景的计数器元素无法与上方标签正确对齐，希望它们紧贴标签下方（标签样式为padding-bottom:2px;），前两个计数器与上方标签间距过大。

当前效果 #

三个带标签的计数器模块横向排列，前两个黄色背景的计数器与上方标签之间存在明显空隙，第三个计数器相对贴近标签。

期望效果 #

三个黄色背景的计数器均紧贴各自上方的标签，无明显空隙，整体对齐整齐。

DOM结构及现有CSS #

<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;
}

问题根源在于counter类使用inline-flex，这类元素默认会和基线对齐，导致出现额外空隙。由于底层HTML/CSS不能修改，可通过新增以下样式解决：

方案一：调整容器行高 #

.account-monitor {
    line-height: 0;
}
.account-monitor-label {
    line-height: normal;
}

通过给容器设置line-height:0消除inline-flex元素的基线空隙，再单独恢复标签的行高避免文字压缩。

方案二：设置垂直对齐 #

.counter {
    vertical-align: top;
}

直接给计数器元素添加垂直对齐样式，使其顶部对齐，消除空隙。

两种方案均无需修改原有计数器的HTML/CSS，不会影响动画效果，可实现黄色计数器紧贴上方标签的需求。

内容的提问来源于stack exchange，提问作者clarkk