I have two list elements with different content lengths, but I need them to have the same height for design purposes. Their width is relative, so I cannot determine the total height. Is there a way to use CSS to set both list elements to the height of the tallest one?
Check out the code in this JSFiddle: 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>