My goal is to display a set number of items in a container, all with the same fixed size. The challenge arises when the content of each item varies in length, causing misalignment vertically:
.child {
display: inline-block;
background: #bbbbbb;
margin: 0.5em;
height: 5em;
width: 8em;
}<div class="container">
<div class="child">1</div>
<div class="child">1<br/>2</div>
<div class="child">1<br/>2<br/>3</div>
<div class="child">1</div>
<div class="child">1<br/>2</div>
<div class="child">1<br/>2<br/>3</div>
<div class="child">1</div>
<div class="child">1<br/>2</div>
<div class="child">1<br/>2<br/>3</div>
</div>The desired outcome can be seen here: https://i.stack.imgur.com/RsKjx.png