Hey there! I have a question about the HTML and CSS code snippet below. I'm trying to align the text in the <h2> tags at the top for all three
<div class="article-col-3">Any help would be greatly appreciated!
.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>Check out the example on JSFiddle.