JSFiddle - React, Tailwind, and code Playground

HTML

<div id="grid1">
  <div id="grid2">
    <div id="canvas-area">
      <canvas/>    
    </div>
    <div id="animator"></div>
  </div>
</div>

<button>Change Canvas Height</button>

CSS

canvas {
  background-color: blue;
}

#grid1 {
  grid-template-rows: 1fr;
}

#grid2 {
  background-color: black;
  display: grid;
  grid-template-rows: 1fr auto;
}

#canvas-area {
  grid-row: 1;
  background-color: red;
  overflow: hidden;
}

#animator {
  grid-row: 2;
  height: 200px;
}

JavaScript

document.getElementsByTagName('button')[0].onclick = () => {
	document.getElementsByTagName('canvas')[0].height = 300
}