JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page">
  <div id="top">top div</div>
  <div id="middle">middle div</div>
  <div id="bottom">bottom div</div>
</div>

CSS

body,
html {
  height: 100%;
}
#page {
  display: table;
  min-height: 100%;
  height: 100%;
  width: 100%;
}
#top, #bottom {
  display: table-row;
  min-height: 17.5%;
  height: auto !important; /* Set height to content height but keep it minimum 17.5% */
  height: 17.5%; /* Some IE don't understand min-height... */
  width: 100%;
}
#middle {
  display: table-row;
  height: auto;
  width: 100%;
}