JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table">
    <div class="row">
        <div class="cell">cell 1</div>
        <div class="cell">cell 2</div>
        <div class="cell">cell 3</div>
        <div class="cell">cell 4</div>
        <div class="cell">cell 5</div>
    </div>
    <div class="row">
        <div class="cell">cell 6</div>
        <div class="cell colspan">
            <div><div>
                cell 7
            </div></div>
        </div>
        <div class="cell colspan">
            <div><div>
                cell 8
            </div></div>
        </div>
    </div>
</div>

CSS

div.table
{
    display:table;
    width:100px;
    background-color:lightblue;
    border-collapse:collapse;
    border:1px solid red;
}

div.row
{
    display:table-row;
}

div.cell
{
    display:table-cell;
    border:1px solid red;
}

div.colspan,div.colspan+div.cell
{
    border:0;
}

div.colspan>div
{
    width:1px;
}

div.colspan>div>div
{
    position:relative;
    width:99px;
    overflow:hidden;
}