JSFiddle - React, Tailwind, and code Playground

HTML

<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>

CSS

.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%;
}

h2 {
  font-size: 16px;
}