JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="blue">

  </div>
  <div class="red">

  </div>
</div>

CSS

.container {
  height:500px;
  width:500px;
  background-color:white;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.blue {
  background-color:blue;
  width:50%;
  height:10%;
  margin-top:auto;
}

.red {
  background-color:red;
  width:50%;
  height:10%;
  margin-bottom:auto;
}