上下に分かれたリストの高さを合わせる

通常の横並びリストの高さを合わせるのは検索すればすぐでてきますが、リストの下部に要素を配置したかったときに困ったのでメモ。
以下みたいなものの実装方法となります。

f:id:hoshi_sbg:20200318182856p:plain

下部に配置したい要素が可変でなければ「poisiton: absolute;」を使うだけで済むんですけどね・・

<ul class="lists">
  <li class="list">
    <div class="list-item">
      <p class="list-item-top">testtest</p>
      <p class="list-item-footer">aaaaaaaaaaaa</p>
    </div>
  </li>
  <li class="list">
    <div class="list-item">
      <p class="list-item-top">testtest</p>
      <p class="list-item-footer">aaaaaaaaaaaa</p>
    </div>
  </li>
</ul>

cssは必要個所のみ記載します。

.lists{
  display: flex;
}

.list{
  display: flex;
  width: 50%;
}

.list-item{
  display: flex;
  flex-direction: column;
}

.list-item-top{
  flex-grow: 1;
}