JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper1">
<div class="content">
<div class="element">lorem</div><div class="element">lorem</div>
</div>
<div class="content">
<div class="element">lorem</div><div class="element">lorem</div><div class="element">lorem</div><div class="element">lorem</div>
</div>
<div class="content">
<div class="element">lorem</div><div class="element">lorem</div><div class="element">lorem</div><div class="element">lorem</div><div class="element">lorem</div><div class="element">lorem</div>
</div>
</div>
<div class="wrapper2">
<div class="content">
<div class="element">lorem</div><div class="element">lorem</div>
</div>
<div class="content">
<div class="element">lorem</div><div class="element">lorem</div><div class="element">lorem</div><div class="element">lorem</div>
</div>
<div class="content">
<div class="element">lorem</div><div class="element">lorem</div><div class="element">lorem</div><div class="element">lorem</div><div class="element">lorem</div><div class="element">lorem</div>
</div>
</div>

CSS

.content{
  display: inline-flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
  padding: 0 10px;
  border: 1px solid #000;
}
.wrapper1{
  height:500px;
  display:inline-block;
  border:1px solid red;
  align-items: unset;
  }
.wrapper2{
  height:500px;
  display:inline-flex;
  border:1px solid green;
  }