JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <colgroup>
        <col class="short" />
        <col span="2" class="long" />
    </colgroup>
    <tr>
        <td>Short</td>
        <td>Long long long long</td>
        <td>Long long long long</td>
    </tr>
    <tr>
        <td>Short</td>
        <td>Long long long long</td>
        <td>Long long long long</td>
    </tr>
    <tr>
        <td>Short</td>
        <td>Long long long long</td>
        <td>Long long long long</td>
    </tr>
</table>

<table>
    <colgroup>
        <col class="short" />
        <col span="" class="long" />
         
    </colgroup>
    <tr>
        <td colspan="2" class="multiCells">Short + Long long long</td>
        <td>Long long long long</td>
        <td>Long long long long</td>
        <td>Long long long long</td>
    </tr>
    <tr>
        <td>Short</td>
        <td>Long long long long</td>
        <td>Long long long long</td>
        <td>Long long long long</td>
        <td>Long long long long</td>
    </tr>
</table>

CSS

table { width: 100%; margin-bottom: 50px; }
.short {
    background: lightblue;
    width: 20%
}
.long {
    background: lightgreen;
    width: 40%;
}
.multiCells { background: #F3A633; }