使用Tailwind CSS实现带标签输入框前后文本的垂直对齐

要实现输入框前后文本（"every"和"hour(s)"）与输入框垂直对齐，只需调整外层容器的垂直对齐方式：

当前代码中外层的flex items-center会让"every"与整个包含label和输入框的div垂直居中，导致"every"和输入框不在同一水平线上。将外层容器的items-center替换为items-baseline，即可让所有子元素的基线对齐，实现"every"、输入框、"hour(s)"的垂直对齐，同时保留label在输入框上方的布局。

修改后的代码：

<div class="space-x-2 flex items-baseline">
    <span>every</span>
    <div class="flex flex-col">
        <label class="mb-1 block text-sm font-semibold text-slate-700">Interval</label>
        <div class="space-x-2 flex items-center">
            <input type="number" class="w-24 block rounded-md text-sm border-slate-300 shadow-sm" />
            <span>hour(s)</span>
        </div>
    </div>
</div>

说明：

• items-baseline 使flex容器内的元素按基线对齐，确保"every"与输入框、"hour(s)"在同一水平线上
• 给中间的div添加flex flex-col，明确label和输入框行的垂直排列结构，布局更清晰

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