强制两个<li>元素具有相同的高度

Question

我有两个<li>元素具有不同的内容（不同长度的文本），但出于设计原因，它们应该具有相同的高度。而且，它们的宽度是相对的，所以我不知道总高度。有没有办法使用CSS将两个<li>元素的高度设置为最大<li>元素的高度？

Jsfiddle：see here

* {
  box-sizing: border-box;
}

ul {
  display: inline-block;
  padding: 0;
  width: 100%;
  border: 1px solid red;
}

li {
  list-style-type: none;
  margin: 0;
  padding: 1em;
  float: left;
  display: inline-block;
  width: 35%;
  margin-right: 50px;
  border: 1px solid #888;
}

<ul>
  <li>
    <h2>caption 1</h2>
    <p>.</p>
    <p>.</p>
    <p>.</p>
    <p>.</p>
    <p>.</p>
    <p>.</p>
  </li>
  <li>
    <h2>caption 2</h2>
    <p>...</p>
  </li>
</ul>

Answer 1

我认为最简单的方法是使用flexbox。

ul {
  display: flex;
}

* {
  box-sizing: border-box;
}

ul {
  padding: 0;
  border: 1px solid red;
  display: flex;
}

li {
  list-style-type: none;
  margin: 0;
  padding: 1em;
  width: 35%;
  margin-right: 50px;
  border: 1px solid #888;
}

<ul>
  <li>
    <h2>caption 1</h2>
    <p>.</p>
    <p>.</p>
    <p>.</p>
    <p>.</p>
    <p>.</p>
    <p>.</p>
  </li>
  <li>
    <h2>caption 2</h2>
    <p>...</p>
  </li>
</ul>