Flexbox 项目由于文本大小不同而未正确对齐

Question

我有一个弹性容器，里面有一些弹性项目。 弹性方向是列，我希望每个项目内的元素正确放置在彼此之下。

这不会发生，因为 h4 文本的长度不同，这就是为什么间距会弄乱布局（温度）的原因。

任何帮助感激不尽！

HTML

<div class="container next-week">
      <div class="forecast-item">
        <h4 class="day">Today</h4>
        <div class="high-low">
          <h4 class="high">28&deg;</h4>
          <h4 class="low">21&deg;</h4>
        </div>
        <i class="wi wi-day-cloudy"></i>
      </div>

      <div class="forecast-item">
        <h4 class="day">Tuesday</h4>
        <div class="high-low">
          <h4 class="high">28&deg;</h4>
          <h4 class="low">21&deg;</h4>
        </div>
        <i class="wi wi-day-cloudy"></i>
      </div>

      <div class="forecast-item">
        <h4 class="day">Wednesday</h4>
        <div class="high-low">
          <h4 class="high">28&deg;</h4>
          <h4 class="low">21&deg;</h4>
        </div>
        <i class="wi wi-day-cloudy"></i>
      </div>

      <div class="forecast-item">
        <h4 class="day">Thursday</h4>
        <div class="high-low">
          <h4 class="high">28&deg;</h4>
          <h4 class="low">21&deg;</h4>
        </div>
        <i class="wi wi-day-cloudy"></i>
      </div>

      <div class="forecast-item">
        <h4 class="day">Friday</h4>
        <div class="high-low">
          <h4 class="high">28&deg;</h4>
          <h4 class="low">21&deg;</h4>
        </div>
        <i class="wi wi-day-cloudy"></i>
      </div>
    </div>

CSS

.next-week {
  color: #f1e3d5;

  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.forecast-item {
  display: flex;
  justify-content: space-between;
}

.forecast-item h4 {
  font-size: 1.6rem;
  color: #f1e3d5;
  margin-bottom: 0.4rem;
}

.forecast-item i {
  font-size: 2rem;
}

.high-low {
  display: flex;
  gap: 1rem;
}