JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div class="child green">
    <p>
    this is some content
    </p>
  </div>
  <div class="child blue">
    <p>
    this is some content
    </p>
    <p>
    this is some content
    </p>
  </div>
  <div class="child red">
    <p>
    this is some content
    </p>
    <p>
    this is some content
    </p>
    <p>
    this is some content
    </p>
  </div>
  <div class="child yellow">
    <p>
    this is some content
    </p>
  </div>
</div>

CSS

.parent {
  display: flex;
  flex-direction: row;
  border: thin solid orange;
  margin: 5px;
  padding: 5px;
  align-items: stretch;
}

.child {
  display: flex;
  height: 100%;
  width: 25%;
  align-self: stretch;
}

.child.blue {
  background: blue;
}

.child.red {
  background: red;
}

.child.yellow {
  background: yellow;
}

.child.green {
  background: green;
}