JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<div class="cont">


<div class="con">
<div class="con1">
<p>con1</p>
</div>
<div class="con2">

<div class="consub1">
<p>consub1</p>
</div>
<div class="consub2">
<p>consub2</p>
</div>
</div>
</div>


<div class="con">
<div class="con1">
<p>con1</p>
</div>
<div class="con2">

<div class="consub1">
<p>consub1</p>
<p>consub1</p>
<p>consub1</p>
</div>
<div class="consub2">
<p>consub2</p>
</div>
</div>
</div>


<div class="con">
<div class="con1">
<p>con1</p>
</div>
<div class="con2">

<div class="consub1">
<p>consub1</p>
</div>
<div class="consub2">
<p>consub2</p>
</div>
</div>
</div>


</div>

CSS

.cont {   display: flex; 
  flex-flow: row wrap; 
  justify-content: space-between;
  align-items: stretch;
  }
  
  p { margin:0; padding:10px; }
  
  .cont .con { display: flex; width:30%; flex-direction: column; align-items: stretch; }
  
  .cont .con .con2 { background-color:#f3f3f3; flex:1; display: flex; flex-direction: column; }
  
  .cont .con .con2 .consub1 { background-color:blue;  flex:1; }
  .cont .con .con2 .consub2 { background-color:red; }