JSFiddle - React, Tailwind, and code Playground

by Rodwyn Moreno

HTML

<div class="race-tbl-hd">
  <div class="gd-col-1">Candidate</div>
  <div class="gd-col-3">Votes</div>
</div>
<div class="race-tbl-rw">
  <div class="race-tbl-cll gd-col-1">a</div>
  <div class="race-tbl-cll gd-col-1">b</div>
  <div class="race-tbl-cll gd-col-1">c</div>
  <div class="race-tbl-cll gd-col-1">d</div>
</div>
<div class="race-tbl-rw">
  <div class="race-tbl-cll gd-col-1">a</div>
  <div class="race-tbl-cll gd-col-1">b</div>
  <div class="race-tbl-cll gd-col-1">c</div>
  <div class="race-tbl-cll gd-col-1">d</div>
</div>
<div class="race-tbl-rw">
  <div class="race-tbl-cll gd-col-1">a</div>
  <div class="race-tbl-cll gd-col-1">b</div>
  <div class="race-tbl-cll gd-col-1">c</div>
  <div class="race-tbl-cll gd-col-1">d</div>
</div>

CSS

.race-tbl-rw {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.gd-col-1 {
  grid-column: span 1;
}

.gd-col-2 {
  grid-column: span 2;
}

.gd-col-3 {
  grid-column: span 3;
}