JSFiddle - React, Tailwind, and code Playground

HTML

<div class="app">
  <div class="first">
    <div class="resizable">This is resizable.</div>
  </div>
  <div class="second">
    <div class="card">
      <div class="name">Zog Blorpton</div>
      <div class="job-title">
        Chief Button Alignment Officer, Button Engineering
      </div>
    </div>
    <div class="card">
      <div class="name">Luma Sparklefizz</div>
      <div class="job-title">
        Senior Unicorn Logistics Manager, Mythical Operations
      </div>
    </div>
    <div class="card">
      <div class="name">Grent Thumble</div>
      <div class="job-title">Director of Awkward Silence, Human Resources</div>
    </div>
    <div class="card">
      <div class="name">Vixi Doodlepop</div>
      <div class="job-title">
        Lead Snack Temperature Analyst, Cafeteria Science
      </div>
    </div>
    <div class="card">
      <div class="name">Brak Stonewhistle</div>
      <div class="job-title">Global Head of Elevator Music, Audio Strategy</div>
    </div>
    <div class="card">
      <div class="name">Niblet Fizzaroo</div>
      <div class="job-title">Junior Cloud Shape Architect, Sky Computing</div>
    </div>
    <div class="card">
      <div class="name">Torka Wobblechin</div>
      <div class="job-title">Principal Chaos Coordinator, Operations</div>
    </div>
    <div class="card">
      <div class="name">Elby Quarn</div>
      <div class="job-title">Vice President of Overthinking, Strategy</div>
    </div>
    <div class="card">
      <div class="name">Drimble Sprocket</div>
      <div class="job-title">Mechanical Pencil Consultant, Office Supplies</div>
    </div>
    <div class="card">
      <div class="name">Yara Fluffernoodle</div>
      <div class="job-title">Director of Whimsical Compliance, Legal</div>
    </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

.app {
  display: grid;
  grid-template-columns: 7fr 3fr;
  align-content: stretch;
  gap: 0.5em;
  width: 700px;
}

.first {
  background: lightgray;
  resize: vertical;
  overflow: auto;
}

.second {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 0.5em;
  background: lightgray;
  padding: 0.5em;
}
.card {
  border: 1px solid black;
  padding: 0.5em;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.name {
  font-size: 1.1em;
  font-weight: bold;
}
.job-title {
  font-size: 0.9em;
  font-weight: lighter;
  color: #333;
}