JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table" title="This table has 3 usable columns">
    <div class="header" title="This is displayed">A Header row</div>
    <div class="row">
        <div></div>
        <div></div>
        <div></div>
        <div><div title="This creates line-feed accordingly">A Header row</div></div>
    </div>
    <div class="row">
        <div>Col A</div>
        <div>Col B</div>
        <div>Col C</div>
    </div>
    <div class="header" title="This is displayed">Another Header row</div>
    <div class="row">
        <div></div>
        <div></div>
        <div></div>
        <div><div title="This creates line-feed accordingly">Another Header row</div></div>
    </div>
    <div class="header l50" title="This is displayed">LEFT HALF</div>
    <div class="header r50" title="This is displayed">RIGHT HALF</div>
    <div class="row">
        <div></div>
        <div></div>
        <div></div>
        <div><div title="This creates cells line-feed accordingly"><div class="l50">LEFT HALF</div><div class="r50">RIGHT HALF</div></div></div>
    </div>
    <div class="row">
        <div>Col A</div>
        <div>Col B</div>
        <div>Col C</div>
    </div>
    <div class="row" title="This is displayed">
        <div><div class="span">Col A & B</div></div>
        <div></div>
        <div class="top"> Col C</div>
    </div>
    <div class="row">
        <div>Col A</div>
        <div>Col B</div>
        <div>Col C</div>
    </div>
</div>

CSS

.table
{   display:table;width:100%;
    position:relative; /* Make RELATIVE to allow ABSOLUTE positioning of the header row(s) */
}
.table > .header
{   background:rgba(255,0,0,0.25);border:1px dashed red;
    display:table-caption; /* We Customise it */
    position:absolute;
    left:0; right:0; /* Left and Right properties allows us to reposition the header SEE .l50 and .r50  */
}
.table > .l50{right:50%;} /* This is an example using the first half thus not the second */
.table > .r50{left:50%;} /* This isn't using the first half */
/* To use the middle we therefore use left:33%;right:33%; (obvious) */
.table > .row{display:table-row;}
.table > .row > *{display:table-cell;}
.table > .header + .row > :last-child{width:1%;max-width:1px;overflow:hidden;visibility:hidden;} /* We need to add an extra cell where neededed to allow or header repositioning using % instead of fixed units */
.table > .header + .row > :last-child > div
{   float:left;display:inline;visibility:hidden;
    width:10000%; /*This is where someone should be ashamed not having thought about responsible <tables> because 100% is the size of the parent element which is 1% of our table width */
}
.table > .header + .row > :last-child > div > .l50
.table > .header + .row > :last-child > div > .r50
{    width:5000%;
}

/* The next part is to sort of have a colspan unfortunately without responsive line-feed thought it's possible using % to estimate the size the span should take but it's not accurate (see HTML render) */
.table > .row > div > .span{position:absolute;left:0;right:33%;background:rgba(0,128,0,0.25);border:1px dashed green;}
.table > .row > .top
{   position:relative;z-index:1;/* THIS MAKES SURE TRADITIONAL CELLS ARE VISIBLE */
    background:rgba(255,128,0,0.5);border:1px dashed orange;
}