如何让文本span显示在flex-direction:row行布局的输入框上方

我正在开发一个表单，当前实现效果如下：

目前Name输入框位于顶部，下方排布开始日期、结束日期输入行的基础效果符合预期，但我希望Start Date、End Date的提示文本显示在对应输入框的上方，而非与输入框处于同一行。我尝试使用flexDirection属性实现该效果但未成功，相关代码如下：

<span>Name </span>
        <Input
          type="text"
          onChange={(e) => setName(e.target.value)}
          value={name}
        />
        <div style={{ flexDirection: "row", display: "flex" }}>
          <span
            style={{
              flexDirection: "column",
              display: "flex",
            }}
          >
            Start Date
          </span>
          <Input
            style={{ flexDirection: "row", width: "45%", flexWrap: "wrap" }}
            type="text"
            onChange={(e) => setStartDate(e.target.value)}
            value={startDate}
          />
          <span>End Date</span>
          <Input
            style={{ flexDirection: "row", width: "45%", flexWrap: "wrap" }}
            type="text"
            onChange={(e) => setEndDate(e.target.value)}
            value={endDate}
          />
        </div>

代码有两个核心问题导致效果不符合预期：

1. flexDirection只会控制当前元素直接子元素的排列方向，你给包裹「Start Date」文字的span设置了flexDirection: column，但这个span没有子元素，文字是它自身的内容，这个属性完全不生效。
2. 两个日期的提示文字、两个输入框全部被放在同一个横向flex容器中，作为同级直接子元素，自然会全部横向排布挤在同一行。

把「单个日期提示文字+对应输入框」单独拆分为一个独立的纵向flex容器，外层容器保持横向布局放置两个日期组即可，原代码里加在Input上的flexDirection、flexWrap都是无效属性，可以直接删除。
修改后的代码：

<span>Name </span>
<Input
  type="text"
  onChange={(e) => setName(e.target.value)}
  value={name}
/>
{/* 外层容器：横向排列两个日期字段组 */}
<div style={{ display: "flex", flexDirection: "row", gap: "16px" }}>
  {/* 单日期组：纵向排列，文字在上、输入框在下 */}
  <div style={{ display: "flex", flexDirection: "column", width: "45%" }}>
    <span>Start Date</span>
    <Input
      type="text"
      onChange={(e) => setStartDate(e.target.value)}
      value={startDate}
    />
  </div>
  {/* 结束日期组结构同开始日期 */}
  <div style={{ display: "flex", flexDirection: "column", width: "45%" }}>
    <span>End Date</span>
    <Input
      type="text"
      onChange={(e) => setEndDate(e.target.value)}
      value={endDate}
    />
  </div>
</div>

• 外层容器的gap属性用于控制两个日期输入组之间的间距，可根据实际设计需求调整数值
• 如果需要调整提示文字和输入框之间的间距，给内层纵向flex容器加rowGap属性即可
• 如果希望Name字段的文字也和输入框上下排列、和日期字段保持一致，也可以用同样的结构，把文字和Input包在纵向flex容器里

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