flexで横並びになったリストの中で、ボタンのみリスト内の最下部に配置したい。

Question

前提・実現したいこと

CodeSandBox
display: flexで縦2列横2列になったリストがあります。
リストの中には内容量が可変するテキストとボタンがあります。

ボタンのみ各リスト内での最下部に配置したいです。
ボタンを各リストの最下部に配置することで、隣同士のボタンの位置を揃えたいです。
テキスト量は可変するため、リストにheightを手動で設定したり、buttonをposition: absoluteで浮かせたりはしたくないです。

発生している問題・エラーメッセージ

テキストの直下にボタンが配置されているため、ボタンの位置が隣のリストと揃っていません。

該当のソースコード

    <ul>
      <li>
        <dl>
          <dt>dtaiueo</dt>
          <dd>
            <p>ddaiueo</p>
            <button>button</button>
          </dd>
        </dl>
      </li>
      <li>
        <dl>
          <dt>dtaiueo</dt>
          <dd>
            <p>ddaiueo</p>
            <p>ddaiueo</p>
            <p>ddaiueo</p>
            <p>ddaiueo</p>
            <p>ddaiueo</p>
            <button>button</button>
          </dd>
        </dl>
      </li>
      <li>
        <dl>
          <dt>dtaiueo</dt>
          <dd>
            <p>ddaiueo</p>
            <p>ddaiueo</p>
            <p>ddaiueo</p>
            <button>button</button>
          </dd>
        </dl>
      </li>
      <li>
        <dl>
          <dt>dtaiueo</dt>
          <dd>
            <p>ddaiueo</p>
            <button>button</button>
          </dd>
        </dl>
      </li>
    </ul>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

ul {
  list-style: none;
  width: 500px;
  margin: 0 auto;
  border: 1px solid black;
  padding: 1em;
  display: flex;
  flex-wrap: wrap;
}

li {
  margin-bottom: 1em;
  width: calc(50% - 0.25em);
}

li:nth-of-type(odd) {
  margin-right: 0.5em;
}

dl {
  height: 100%;
  margin: 0;
  padding: 1em;
  background-color: #ddd;
}

dt {
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: auto;
}

dd {
  margin: auto 0 0 0;
  height: 100%;
}

p {
  margin: 0;
}

試したこと

buttonに下記のスタイルを設定しました。

button {
  display:block;
  height: 100%;
  margin-top: auto;
}

すると下図のように、ボタンがリストからはみ出してしまいました。

Comments

[Lhankor_Mhy]

HTMLの変更をするのは構いませんか？

[erajera]

コメントいただきありがとうございます。今後若干HTML構造が変わる可能性があるため、極力は変更しないようにしたいです（とすると当質問も意味をなさなくなるかもですが）。ですが、現状の構造ではどうあっても不可能、という場合であればHTML構造の変更は構いません。

Answer 1

これを追加するとどうでしょうか。

dl {
    display: flex;
    flex-direction: column;
}

dd {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

dd > *:nth-last-child(2) {
    flex-grow: 1;
}

Comments

[erajera]

できました！ありがとうございました。

Answer 2

li {
  position:relative;
}
dd p:nth-last-child(2) {
  margin-bottom: 10px;
}
button{
  position:absolute;
  bottom:0;
}