横並びになったリストの高さを揃えたい

前提・実現したいこと

ul・li・dlタグで構成された横2列縦2列のリストがあります。
ddタグのコンテンツ量は可変です。
下記はデモです。
デモ

現状、隣同士のリストの高さが揃っていません。
liとdlの高さを幅いっぱいまで広げて、リストの高さが長い方を基準に隣同士で高さを揃えたいです。

一応liとdlタグにheight: 100%;を指定していますが効いていません。

該当のソースコード

html
1   <ul>
2      <li>
3        <dl>
4          <dt>dtaiueo</dt>
5          <dd>
6            <p>ddaiueo</p>
7            <p>ddaiueo</p>
8          </dd>
9        </dl>
10      </li>
11      <li>
12        <dl>
13          <dt>dtaiueo</dt>
14          <dd>
15            <p>ddaiueo</p>
16            <p>ddaiueo</p>
17            <p>ddaiueo</p>
18            <p>ddaiueo</p>
19            <p>ddaiueo</p>
20            <p>ddaiueo</p>
21          </dd>
22        </dl>
23      </li>
24      <li>
25        <dl>
26          <dt>dtaiueo</dt>
27          <dd>
28            <p>ddaiueo</p>
29            <p>ddaiueo</p>
30            <p>ddaiueo</p>
31            <p>ddaiueo</p>
32          </dd>
33        </dl>
34      </li>
35      <li>
36        <dl>
37          <dt>dtaiueo</dt>
38          <dd>
39            <p>ddaiueo</p>
40          </dd>
41        </dl>
42      </li>
43    </ul>

css
1*,
2*::before,
3*::after {
4  box-sizing: border-box;
5}
6
7body {
8  margin: 0;
9}
10
11ul {
12  list-style: none;
13  width: 500px;
14  margin: 0 auto;
15  border: 1px solid black;
16  padding: 1em;
17}
18
19ul::after {
20  content: "";
21  display: block;
22  clear: both;
23}
24
25li {
26  height: 100%;
27  margin-bottom: 1em;
28  width: calc(50% - 0.25em);
29  float: left;
30}
31
32li:nth-of-type(odd) {
33  margin-right: 0.5em;
34}
35
36dl {
37  height: 100%;
38  margin: 0;
39  padding: 1em;
40  background-color: #ddd;
41}
42
43dt {
44  font-size: 1.1em;
45  font-weight: bold;
46}
47
48dd {
49  margin: 0;
50}
51
52p {
53  margin: 0;
54}