如何让输入框在容器内居中，不被上方label标签挤压下移

我正在开发一款符合以下设计效果的搜索框：

搜索容器内包含多个输入字段，每个输入字段上方都对应展示label标签。当前遇到的问题是：现有布局是将label+输入框作为整体在容器内居中对齐，而我需要实现仅输入框自身的中心与容器中心对齐，当前实际效果如下图：

现有实现代码 #

<form className='searchContainer'>
  <div className="searchinner">
    <label>Where To?</label><br/>
    <input type="text" className="block" placeholder="Location" />
  </div>
  <div className="searchinner">
    <label>Date</label><br/>
    <input className="block" placeholder="Any" />
  </div>
  <div className="searchinner">
    <label>Number of Guests</label><br/>
    <select className='block' >
      <option value="Any">Any</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
    </select>
  </div>
  <div className='searchinner'>
    <Link to='/sign-up' className='btn-mobile' >
      <Button buttonStyle='btn--outline' buttonSize='btn--medium'>Search</Button>
    </Link>
  </div>
</form>

现有CSS代码 #

.searchContainer{
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  margin-top: 10vh;
  height: 12vh;
  background: lightgrey;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.block{
  outline: none;
}

核心思路是让label脱离正常文档流，不占用.searchinner的高度，这样flex容器对齐的就是输入框、选择框、按钮这类交互元素的高度，自然就实现交互元素中心和容器中心对齐，label浮在输入框上方即可。
新增以下CSS样式：

.searchinner {
  position: relative;
  padding: 0 10px; /* 可根据设计调整各字段的左右间距 */
}
.searchinner label {
  position: absolute;
  top: -22px; /* 可根据label字号调整和输入框的上下距离 */
  left: 10px; /* 要和.searchinner的左padding一致，实现label和输入框左对齐 */
  font-size: 14px; /* 按需调整label的字号 */
  white-space: nowrap; /* 避免长label换行 */
}

原有代码不需要做结构修改，只需添加上述CSS即可达到预期效果。

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