JSFiddle - React, Tailwind, and code Playground

by Hugo Vale Pereira

HTML

<div class="linha">
  <div class="fixa-esquerda">Esquerda</div>
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="fixa-direita">Direita</div>
</div>

<div class="linha">
  <div class="fixa-esquerda">Esquerda</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="fixa-direita">Direita</div>
</div>

CSS

.linha {
  display: grid;
  grid-template-columns: 150px repeat(auto-fit, minmax(100px, 1fr)) 150px;
  gap: 10px;
  margin-bottom: 10px;
}

.fixa-esquerda {
  grid-column: 1;
}

.fixa-direita {
  grid-column: -1;
}