如何根据最长span宽度调整输入框尺寸？Tailwind CSS布局问题

我想让输入框的宽度匹配最长的span文本的尺寸，试过用grow-0、shrink-1以及inline类的display属性，但都没解决。

期望效果：

当前效果：

HTML代码：

<div className="flex flex-col gap-[45px]">
    <div className="gap-[45px] flex flex-col">
        <div className="flex flex-col gap-[10px]"><span className="text-textColor_base text-[18px]">Range of balance percentage</span>
            <div className="flex"><input
                className="border-input pl-[5px] h-[45px] rounded-l-[5px] border-l-[1px] border-r-[1px] bg-inputColor_background text-textColor_base"
                placeholder="Min(%)" type="number" name="balancePercentage_min"></input><input
                className="border-input pl-[5px] h-[45px] rounded-r-[5px] border-r-[1px] bg-inputColor_background text-textColor_base"
                placeholder="Min(%)" type="number" name="balancePercentage_min"></input></div>
        </div>
        <div className="flex flex-col gap-[10px]"><span
            className="text-textColor_base text-[18px]">Range of leverage</span>
            <div className="flex"><input
                className="border-input pl-[5px] h-[45px] rounded-l-[5px] border-l-[1px] border-r-[1px] bg-inputColor_background text-textColor_base"
                placeholder="Min(x)" type="number" name="leverage_min"></input><input
                className="border-input pl-[5px] h-[45px] rounded-r-[5px] border-r-[1px] bg-inputColor_background text-textColor_base"
                placeholder="Min(x)" type="number" name="leverage_min"></input></div>
        </div>
        <div className="flex flex-col gap-[10px]"><span className="text-textColor_base text-[18px]">Range of duration of transactions</span>
            <div className="flex"><input
                className="border-input pl-[5px] h-[45px] rounded-l-[5px] border-l-[1px] border-r-[1px] bg-inputColor_background text-textColor_base"
                placeholder="Min(Hours)" type="number" name="durationOfTransactions_min"></input><input
                className="border-input pl-[5px] h-[45px] rounded-r-[5px] border-r-[1px] bg-inputColor_background text-textColor_base"
                placeholder="Min(Hours)" type="number" name="durationOfTransactions_min"></input></div>
        </div>
        <div className="flex flex-col gap-[10px]"><span className="text-textColor_base text-[18px]">Delay between transactions</span>
            <div className="flex"><input
                className="border-input pl-[5px] h-[45px] rounded-l-[5px] border-l-[1px] border-r-[1px] bg-inputColor_background text-textColor_base"
                placeholder="Min(Hours)" type="number" name="delayTransactions_min"></input><input
                className="border-input pl-[5px] h-[45px] rounded-r-[5px] border-r-[1px] bg-inputColor_background text-textColor_base"
                placeholder="Min(Hours)" type="number" name="delayTransactions_min"></input></div>
        </div>
    </div>
    <input className="rounded-[5px] bg-commonColor_secondary text-textColor_base" type="submit" value="Start"></input></div>

只需调整外层容器和输入框容器的布局属性，就能让输入框宽度匹配最长span的尺寸：

• 给包含所有表单项的外层div（原gap-[45px] flex flex-col）添加inline-flex类，让容器宽度自适应内部最宽的内容（即最长的span文本）。
• 给每个包裹输入框的div.flex添加w-full类，让输入框容器填满父级宽度，两个输入框会自动平分这个宽度。

修改后的关键代码片段：

<div className="gap-[45px] inline-flex flex-col">
    <div className="flex flex-col gap-[10px]">
        <span className="text-textColor_base text-[18px]">Range of balance percentage</span>
        <div className="flex w-full">
            <!-- 输入框代码保持不变 -->
        </div>
    </div>
    <!-- 其他表单项的输入框容器同理添加w-full类 -->
</div>

这样所有输入框组的宽度都会统一匹配最长的span文本宽度，达到你想要的效果。

内容的提问来源于stack exchange，提问作者blnk.off