垂直对齐 flex children 与不同字体大小的文本

Question

我使用 Tailwind CSS。我正在尝试将 flex 容器与 flex 子容器垂直对齐，每个子容器的字体大小都不同。我对每个孩子都尝试了

vertically-align: middle

，但这似乎不起作用。我也尝试过

line-height

但是当字体大小不是 2:1 时，不同的字体大小会变得混乱。我如何让每个

span

中的文本在所有 flex 子项上完美垂直对齐？

<div class="flex items-center">
    <span class="text-2xl">Hello</span>
    <span class="text-xs">Goodbye</span>
    <span class="text-base">Stackoverflow</span>
</div>