Section below another doesn't go directly underneath the one above - html

Question

I have these three sections that have three sections underneath them and I would like for the ones below to follow the ones directly above them. For example in this codepen the second section below does not go directly underneath the second section above, because the first section above is a little longer.
codepen.io/anon/pen/apEQRE
Is there a way to fix that?

Answer 1

Not easily without changing your HTML structure. You could float the elements to the left rather than displaying them as inline-block, however, the element on the bottom left would have the same problem. You could display them as flex, but that would cause problems with the way the text is formatted.
What I would recommend is diving the sections into three defined columns:
<div class="column">
<section>
<h2>Title</h2>
<p>Text</p>
<p>Text</p>
</section>
<section>
<h2>Title</h2>
<p>Text</p>
</section>
</div>
Then you would need to slightly change your CSS to cover this:
.column {
float: left;
width: 33.33%;
}
section {
text-align: center;
background-color: white;
width: 90%;
padding: 15px;
border: 1px solid #007d87;
margin-bottom: 5px;
opacity: 0.8;
display: inline-block;
text-align: left;
vertical-align: top;
}
I've created a new pen showcasing this.
Note that your example has identical sections, but in practical application, you'll need to re-order the sections so that they read left to right, rather than top to bottom.
Hope this helps!