JSFiddle - React, Tailwind, and code Playground

by jimousse

HTML

<div class="parent">
      <div class="child1">
        child 1
      </div>
      <div class="child2">
        <div class="grandchild2">
        </div>
      </div>
    </div>

CSS

.parent {
      height: 150px;
      display: flex;
      flex-direction: column;
      background: salmon;
      border: 2px solid black;
    }

    .child1 {
      background: red;
    }

    .child2 {
      background: grey;
      flex-grow: 1;
      display: flex; /* <---- added that */
      flex-direction: column; /* <---- added that */
    }

    .grandchild2 {
      height: 100%;
      background: blue;
    }