JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div class="container">
   <div class="card">1</div>
   <div class="card">2</div>
   <div class="card">3</div>
   <div class="card">4</div>
   <div class="card">5</div>
   <div class="card">6</div>
   <div class="card">7</div>
   <div class="card">8</div>
   <div class="card">9</div>
   <div class="card">10</div>
  </div>
  <div class="detail">
    Detail
   
  </div>
</div>

CSS

.parent {
  width: 100%;
  display:flex;
}

.container {
  grid-template-columns: repeat(auto-fit, minmax(100px, 200px));
  grid-auto-rows: min-content;
  gap: 10px;
  display: grid;

  align-items: flex-start;
}

.card {
  height: 30px;
  background: red;

}

.detail {
  flex-grow:1;
  background: blue;
  height: 800px;
 
}