JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="table">
    <div class="header">Characters</div>
    <div class="row">A</div>
    <div class="row">B</div>
    <div class="row">C</div>
    <div class="row">D</div>
    <div class="row">E</div>
    <div class="row">F</div>
    <div class="row">G</div>
    <div class="row">H</div>
    <div class="row">I</div>
    <div class="row">J</div>
    <div class="row">K</div>
    <div class="row">L</div>
    <div class="row">M</div>
    <div class="row">N</div>
    <div class="row">O</div>
    <div class="row">P</div>
    <div class="row">Q</div>
    <div class="row">R</div>
    <div class="row">S</div>
    <div class="row">T</div>
    <div class="row">U</div>
    <div class="row">V</div>
    <div class="row">W</div>
    <div class="row">X</div>
    <div class="row">Y</div>
    <div class="row">Z</div>
    <div class="footer">Total 26</div>
  </div>
  <div class="side">Side</div>
</div>

CSS

.container {
  height: 300px;
  display: grid;
  grid-template-columns: 2fr 1fr;
}

.side {
  background-color: grey;
}

.table {
  display: grid;
  overflow: auto;
}

.row {
  display: grid;
}

.header {
  background-color: lightgrey;
  position: sticky;
  top: 0;
}

.footer {
  background-color: lightgrey;
  position: sticky;
  bottom: 0;
}