使用 bootstrap 在同一弹性行上对齐单独的 div

Question

我的 html 中有 2 个单独的 div，我想在同一个 flex 行上显示它们。第一个 div 具有 column 属性，因为它包含一个带有需要堆叠的按钮的输入字段。第二个包含 4 个用边框包裹的文本元素。

      <div class="row flex-column ms-2">
        <div id="search-text" class="mt-2 mb-2">Search city:</div>
        <div id="search-box" class="form-outline col-3 mb-2 p-0">
          <input
            type="search"
            id="searchBox"
            class="form-control"
            placeholder="Enter city name"
            aria-label="Search" />
        </div>
        <button type="button" id="searchBtn" class="btn btn-primary col-3 mb-2">Search</button>
        <div id="search-history" class="col-3"></div>
      </div>

      <div class="d-flex flex-row-reverse">
        <div
          id="current-box"
          class="col-8 bg-light border border-dark mt-2"
          style="--bs-bg-opacity: 0.3">
          <h1 id="city-date"></h1>
          <p id="curr-temp"></p>
          <p id="curr-wind"></p>
          <p id="curr-humid"></p>
        </div>
      </div>

我试图将“洛杉矶”部分的顶部与“搜索城市：”文本水平对齐。我尝试了几种不同的方法，例如使用容器，使用相对位置和绝对位置，将元素放在同一个 div 中，但它们都没有按照我的需要对齐它。

遇到障碍，希望有人能给我一个合适的解决方案。谢谢

[当前页面显示][1]：https://i.stack.imgur.com/ZGMAN.jpg