JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table">
  <div class="row">
    <div class="cell colspan">
      <div class="spanned-content">Spanned Cell</div>
    </div>
  </div>
  <div class="row">
    <div class="cell">Cell</div>
    <div class="cell">Cell</div>
    <div class="cell">Cell</div>
  </div>
  <div class="row">
    <div class="cell colspan">
      <div class="spanned-content">Spanned Cell - Spanned Cell</div>
    </div>
  </div>
  <div class="row">
    <div class="cell">Cell</div>
    <div class="cell">Cell</div>
    <div class="cell">Cell</div>
    <div class="cell">Cell</div>
    <div class="cell">Cell</div>
    <div class="cell">Cell</div>
  </div>
</div>

CSS

.table {
            display: table;
            border: 1px;
        }
        .row {
            display: table-row;
        }
        .cell {
            display: table-cell;
        }
        .colspan:after {
            /* What to do here? */
            content: "c";
            display: inline;
            visibility: hidden;
        }
        .spanned-content {
            position: absolute;
        }