JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table">
  <div class="row thead">
    <div class="cell">
      <p>col A</p>
    </div>
    <div class="cell">
      <p>col B</p>
    </div>
  </div>
  <div class="row">
    <div class="cell rowspan">
      <p>BIG A0</p>
    </div>
    <div class="cell">
      <p>B0</p>
      <p>B0</p>
      <p>B0</p>
    </div>  
  </div>
  <div class="row">
    <div class="cell">
      <p>A1</p>
    </div>
    <div class="cell">
      <p>B1</p>
    </div>
  </div>
  <div class="row">
    <div class="cell">
      <p>A2</p>
    </div>
    <div class="cell">
      <p>B2</p>
    </div>
  </div>
  <div class="row">
    <div class="cell">
      <p>A3</p>
    </div>
    <div class="cell">
      <p>B3</p>
    </div>
  </div>
    <div class="row">
    <div class="cell">
      <p>A4</p>
    </div>
    <div class="cell">
      <p>B4</p>
    </div>
  </div>
  <div class="row">
    <div class="cell rowspan">
      <p>BIG A5</p>
    </div>
    <div class="cell">
      <p>B5</p>
      <p>B5</p>
    </div>  
  </div>
  <div class="row">
    <div class="cell rowspan">
      <p>BIG A6</p>
    </div>
    <div class="cell">
      <p>B6</p>
      <p>B6</p>
      <p>B6</p>
      <p>B6</p>
    </div>  
  </div>
  <div class="row">
    <div class="cell rowspan">
      <p>BIG A7</p>
    </div>
    <div class="cell">
      <p>B7</p>
      <p>B7</p>
    </div>  
  </div>
  <div class="row">
    <div class="cell">
      <p>A8</p>
    </div>
    <div class="cell">
      <p>B8</p>
    </div>
  </div>
  <div class="row">
    <div class="cell">
      <p>A9</p>
    </div>
    <div class="cell">
      <p>B9</p>
    </div>
  </div>
</div>

CSS

*,*:before,*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


.table {
  display: table;
  width: 50%;
}
.row {
  display: table-row;
  font-size: 0;
}
.cell {
  display: table-cell;
  width: 50%;
  font-size: initial;
  vertical-align: middle;
}
.cell p {
  padding: 2px 5px;
}



.table { border: 1px solid #000; }
.row:first-of-type .cell { border-top: none; }
.cell { border-top: 1px solid #000; }
.cell:first-of-type { border-right: 1px solid #000; }
.cell:not(.rowspan) p:not(:first-child) { border-top: 1px solid #000; }


.row:nth-of-type(even) {
  background-color: orange;
}

.thead {
  text-align: center;
  font-weight: bold;
}