JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container1">
    <table id="tbl">
        <thead>
            <tr>
                <th>header1</th>
                <th>header2</th>
            </tr>
            <tr>
                <th>header1</th>
                <th>header2</th>
            </tr>
        </thead>
    </table>
</div>
<div id="container">
    <table id="tbl">
        <thead>
            <tr class="dummy">
                <th><span>header1</span></th>
                <th><span>header2</span></th>
            </tr>
        </thead>
        <tr>
            <td>aaaa</td>
            <td>bbbb</td>
        </tr>
        <tr>
            <td>aaaa</td>
            <td>bbbb</td>
        </tr>
        <tr>
            <td>aaaa</td>
            <td>bbbb</td>
        </tr>
        <tr>
            <td>aaaa</td>
            <td>bbbb</td>
        </tr>
        <tr>
            <td>aaaa</td>
            <td>bbbb</td>
        </tr>
        <tr>
            <td>aaaa</td>
            <td>bbbb</td>
        </tr>
        <tr>
            <td>aaaa</td>
            <td>bbbb</td>
        </tr>
        <tr>
            <td>aaaa</td>
            <td>bbbb</td>
        </tr>
        <tr>
            <td>aaaa</td>
            <td>bbbb</td>
        </tr>
        <tr>
            <td>aaaa</td>
            <td>bbbb</td>
        </tr>
        <tr>
            <td>aaaa</td>
            <td>bbbb</td>
        </tr>
        <tr>
            <td>aaaa</td>
            <td>bbbb</td>
        </tr>
        <tr>
            <td>aaaa</td>
            <td>bbbb</td>
        </tr>
    </table>
</div>

CSS

#container1, #container {
    column-count:2;
    -moz-column-count:2;
    -webkit-column-count:2;
}

#tbl {
}

.dummy > th > span {
    display: block;
    height: 0;
    opacity: 0;
}