JSFiddle - React, Tailwind, and code Playground

HTML

<div id = "canvas">
  <div class = "top">
  
  </div>
  <div class = "bottom">
  
  </div>
</div>

CSS

#canvas {
  height: 150px;
  width: 200px;
  background-color: red;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.top {
  height: 50px;
  width: 100%;
  background-color: yellow;
  display: block;
}
.bottom {
  height: 100%;
  width: 100%;
  background-color: blue;
  display: block;
  position: absolute;
}