JSFiddle - React, Tailwind, and code Playground

HTML

<section class="sect1">
  <div class="b-table">
    <div class="b-table__row">
      <div class="b-table__header b-table__cell--half-wide">Company</div>
      <div class="b-table__header b-table__cell--quarter-wide">Contact</div>
      <div class="b-table__header b-table__cell--quarter-wide">Country</div>
    </div>
    <div class="b-table__row">
      <div class="b-table__cell">Alfreds Futterkiste</div>
      <div class="b-table__cell">Maria Anders</div>
      <div class="b-table__cell">Germany</div>
    </div>
    <div class="b-table__row">
      <div class="b-table__cell">Centro comercial Moctezuma</div>
      <div class="b-table__cell">Francisco Chang</div>
      <div class="b-table__cell">Mexico</div>
    </div>
    <div class="b-table__row">
      <div class="b-table__cell">Ernst Handel</div>
      <div class="b-table__cell">Roland Mendel</div>
      <div class="b-table__cell">Austria</div>
    </div>
    <div class="b-table__row">
      <div class="b-table__cell">Island Trading</div>
      <div class="b-table__cell">Helen Bennett</div>
      <div class="b-table__cell">UK</div>
    </div>
    <div class="b-table__row">
      <div class="b-table__cell">Laughing Bacchus Winecellars</div>
      <div class="b-table__cell">Yoshi Tannamuri</div>
      <div class="b-table__cell">Canada</div>
    </div>
    <div class="b-table__row">
      <div class="b-table__cell">Magazzini Alimentari Riuniti</div>
      <div class="b-table__cell">Giovanni Rovelli</div>
      <div class="b-table__cell">Italy</div>
    </div>
  </div>
</section>

<section class="sect2">
  <div class="b-table">
    <div class="b-table__row">
      <div class="b-table__header b-table__cell--half-wide">Company</div>
      <div class="b-table__header b-table__cell--half-wide">Contact</div>
    </div>
    <div class="b-table__row">
      <div class="b-table__cell">Alfreds Futterkiste</div>
      <div class="b-table__cell">Maria Anders</div>
    </div>
    <div class="b-table__row">
      <div...

SCSS

.b-table {
  dispay: table;
  width: 100%;
  font-family: arial, sans-serif;
  
  &__cell,
  &__header {
    display: table-cell;
    text-align: left;
    padding: .6em;
  }
  
  &__cell {
    border: 1px solid #ddd;
    
    &--half-wide {
      width: 50%;
    }
    
    &--quarter-wide {
      width: 25%;
    }
  }
  
  &__header {
    background-color: orangered;
    border: 1px solid red;
  }
  
  &__row {
    display: table-row;
    width: 100%;
    
    &:nth-child(even) {
      background-color: #eee;
    }
  }
}