JSFiddle - React, Tailwind, and code Playground

by Taras Vasylivskyy

HTML

<div class="box-container">
   <div class="box">
        <div>Two</div>
        <div>two has more content <br>Three has more contenttwo has more content <br>Three has more contenttwo has more content <br>Three has more contenttwo has more content <br>Three has more content</div>
  </div>
  <div class="box">
        <div>Two</div>
        <div>two has more content <br>Three has more contenttwo has more content <br>Three has more contenttwo has more content <br>Three has more contenttwo has more content <br>Three has more content</div>
  </div>
</div>

CSS

.box-container {
    display: flex;
  }
  
  .box {
    display: flex;
    flex-direction: row;
    width: 100%
    flex-wrap: wrap;
  }
  
  .box:first-child {
        flex: 50px 0 0;
  }
  .box:nth-child(2) {
    flex: 1 1 0;
  }