JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer-grid">
	<div class="nested-grid">
    <canvas class="yellow"></canvas>
    <canvas class="brown"></canvas>
	</div>
</div>

CSS

html, body {
  height: 100%;
  margin: 0;
}
canvas {
	display: block;
}
.yellow {
	background: yellow;
	grid-area: yellow;
}
.brown {
	background: brown;
	grid-area: brown;
}
.outer-grid {
	display: grid;
	grid-template-rows: 1fr;
	width: 100%;
	height: 100%;
}
.nested-grid {
	display: grid;
	width: 100%;
	height: 100%;
	grid-template-columns: 5fr;
	grid-template-rows: 5fr 1fr;
	grid-template-areas:
		"yellow"
		"brown";
}
.nested-grid > * {
	width: 100%;
	height: 100%;
}