JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <colgroup>
        <col id="left-column">
        <col id="right-column">
    </colgroup>
    <tr>
        <td colspan="2">colspan="2"</td>
    </tr>
    <tr>
        <td>#left-column</td>
        <td>this cell can be hidden; see below;</td>
    </tr>
    <tr>
        <td colspan="2">colspan="2"</td>
    </tr>
     <tr>
         <td>#left-column</td>
         <td style="display: none">#right-column</td>
    </tr>
</table>

CSS

table {
    width: 100%;
    height: 400px;
    border-spacing: 10px;
    border: 3px solid black;
    background-color: cornsilk;
}

col#left-column {
    width: 40%;
    background-color: lightcyan;
}

col#right-column {
    background-color: yellow;
}

td {
    height: 50px;
    border: 2px dashed red;
    text-align: center;
}