I do have a simple question regarding the following HTML and CSS example. I want to align the <h2> text at the top for all three <div class="article-col-3"> containers. However, it is aligned at the bottom and I cannot figure out how to change this behavior. I am starting to get familiar with CSS right now, so some parts are not as obvious as they should be. Attached, I do have the jsfiddle example and also added the tiny code into the post. I tried different options already, and probably I have to use another div container to split the heading and the following text as given in this answer https://stackoverflow.com/a/24830432/6936240. However, maybe the small code below can be simply extended to achieve the correct alignment.
Thank you in advance, Tobi
.article {
text-align: center;
padding: 20px;
}
.article-col {
margin-top: 50px;
margin-bottom: 50px;
}
.article-col-3 {
display: inline-block;
padding-left: 10px;
padding-right: 10px;
width: 23%;
height: 100%;
}
h2 {
font-size: 16px;
}<div class="article">
Some pre text that might be placed here. Nothing special at all, but the next stuff should be displayed in three columns and each headline should start at the top and not at aligned at the bottom.
<div class="article-col">
<div class="article-col-3">
<h2>Part 1</h2>
<p>Sub-Text Passage</p>
</div>
<div class="article-col-3">
<h2>Part 2</h2>
<p>Sub-Text Passage</p>
</div>
<div class="article-col-3">
<h2>Part 3</h2>
<p>Sub-Text Passage which might be a bit longer and thus, the other went down</p>
</div>
</div>
</div>
