JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='flex'>
  <div class='box'>
x
  </div>
  <div class='box'>
y
  </div>
  <div class='box'>
z
  </div>
</div>

CSS

html, body {
  height: 100%;
  margin: 0;
}

.flex {
  display: flex;
  flex-direction: column;
  align-content: stretch;
  min-height: 100%;
  color: white;
  font-family: sans-serif;
}

.box {
  background: teal;
  margin-bottom: 1px;
}

.grow {
  flex-grow: 1;
}