JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

* {
  box-sizing: border-box;
}

#container {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: flex-start;
  flex-flow: column wrap;
}
#container > div {
  margin: 10px;
  border: 2px solid #ff0000;
  width: 100%;
}
#container > div:nth-child(1) { height: 5%; }
#container > div:nth-child(2) { height: 10%; }
#container > div:nth-child(3) { height: 20%; margin-top: auto; }