添加可选标签文本时保持输入框行对齐的最优方案

我有一行3个输入框，其中一个输入框上方带有可选标签文本，希望该标签不影响输入框的对齐。目前我使用flexbox布局，通过为可选标签设置position: absolute;使其脱离flex流来维持输入框对齐，但该方案在小视口换行时会出现间距不一致的问题。我也尝试过CSS grid，但需要为每次换行编写媒体查询，体验更差。同时希望方案不设置固定宽高，以适配动态元素与文本，请问实现该功能并实现更流畅换行的最优方式是什么？

原实现代码：

CSS #

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.optionalContainer {
  position: relative;
  /*hack to container optional text*/
  padding: 20px 0;
}

.optional {
  position: absolute;
  top: 0;
  margin: 0;
}

HTML #

<form class="container">
  <input required type="text"/>
  <div class="optionalContainer">
    <p class="optional">Optional:</p>
    <input type="text"/>
  </div>
  <input required type="text"/>
</form>

核心思路是让所有输入项都处于结构一致的flex列容器中，确保输入框对齐的同时，避免绝对定位和媒体查询的弊端：

修改后的代码 #

CSS

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* 统一控制输入项间的间距，适配所有视口 */
}

.input-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.optional {
  margin: 0 0 0.5rem 0; /* 标签与输入框的间距 */
}

HTML

<form class="container">
  <div class="input-wrapper">
    <input required type="text">
  </div>
  <div class="input-wrapper optional-wrapper">
    <p class="optional">Optional:</p>
    <input type="text">
  </div>
  <div class="input-wrapper">
    <input required type="text">
  </div>
</form>

方案优势 #

• 无需绝对定位，彻底解决小视口换行时的间距错乱问题
• 利用flex的gap属性统一管理输入项间距，换行时自动保持一致
• 不设置固定宽高，完全适配输入框和标签的动态内容
• 无需编写媒体查询，flex-wrap会根据视口宽度自动换行，排版流畅自然

预期效果说明 #

• 大视口：三个输入框横向排列，中间输入框上方显示"Optional:"标签，三个输入框底部对齐
• 中视口：前两个输入框横向排列，第三个换行至下一行，所有输入框保持对齐，间距一致
• 小视口：三个输入框各占一行，输入框左对齐，中间输入框的标签仍位于其上方

内容的提问来源于stack exchange，提问作者anthony-dandrea