JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>
    <div class="one">Variable Height Title</div>
    <div class="one">Variable Height Title that Might be two lines longgggggg</div>
    <div class="one">Variable Height Title</div>
  </li>
  <li>
    <div class="two">Fixed height middle block</div>
    <div class="two">Fixed height middle block</div>
    <div class="two">Fixed height middle block</div>
    
  </li>
  <li>
    <div class="three">Variable height middle block<br />more content<br /> more contentmore content<br /> more content<br /> more content</div>
    <div class="three">Variable height middle block</div>
    <div class="three">Variable height middle block</div>
  </li>
  <li>
    <div class="four">Fixed height footer</div>
    <div class="four">Fixed height footer</div>
    <div class="four">Fixed height footer</div>
  </li>

</ul>

CSS

ul { display: table; }

li {
  display: table-row;
}

div { width:33%; display: table-cell; }

.one, .three {
  background-color:blue;
}
.two, .four {
  background-color:green;
}