JSFiddle - React, Tailwind, and code Playground

HTML

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

</ul>

CSS

ul { display: table; } /* Behave as table */
ul > li { 
  display: table-cell; 
  vertical-align: bottom;
  background-color: #cccccc;
}  /* li's are table cells, height of max table height*/


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