JSFiddle - React, Tailwind, and code Playground

HTML

<aside>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
  <p>long content</p>
</aside>
<header>
  <p>fixed height</p>
</header>
<main>
  <p>might be long</p>
</main>

CSS

html {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  display: grid;
  grid-template: "sidebar header" "sidebar content";
  grid-template-columns: 200px 1fr;
  grid-template-rows: 200px 1fr;
}

aside {
  grid-area: sidebar;
  background-color: red;
}

header {
  grid-area: header;
  background-color: green;
}

main {
  grid-area: content;
  background-color: blue;
}

aside,
header,
main {
  padding: 20px;
}