JSFiddle - React, Tailwind, and code Playground

by Konstantin Rouda

HTML

<div class="c-parent">
  <div class="c-child">Firs Child<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris neque felis, aliquet non tempor et, ultricies a purus. Fusce ac orci nisi. Phasellus purus orci, posuere euismod gravida quis, auctor vel lectus. Vestibulum sodales odio vitae laoreet accumsan. Maecenas rhoncus ut dui sit amet pretium. Vivamus non urna quis massa mattis ornare ac vel augue. Proin tristique, sem quis porttitor gravida, mi dolor malesuada orci, vel auctor odio lacus vel est. Quisque dapibus elementum eros, eu convallis quam dapibus vitae. Cras mattis, orci sit amet tristique suscipit, velit turpis sollicitudin tellus, a convallis odio dolor vel sapien. Sed tincidunt porta ante, ac hendrerit nunc rutrum a. Fusce tempus commodo massa, id mollis eros sodales ac. Nulla sed laoreet mauris, a suscipit nibh. Aenean iaculis elit sit amet ligula ullamcorper interdum.</p>
  </div>
  <div class="c-child">Second Child</div>
  <div class="c-child">Third Child</div>
</div>

CSS

* {
  box-sizing: border-box;
}

.c-parent {
  display: flex;
  width: 700px;
  border: 1px solid;
}

.c-child {
  min-height: 200px;
  padding: 1rem;
  flex-grow: 1;
}

.c-child:first-child {
  background: cornflowerblue;
}

.c-child:nth-child(2) {
  background: firebrick;
}