JSFiddle - React, Tailwind, and code Playground

HTML

Click on th and drag... Fixed Header table
<br>
<br>
<div id="wrapper">
    <table id="fixedHeaderTable">
        <tbody>
            <tr>
                <th>th 1</th>
                <th>th 2</th>
                <th>th 3</th>
                <th>th 4</th>
            </tr>
        </tbody>
    </table>
    <div>
        <table id="contentsTable">
            <col/>
            <col/>
            <col/>
            <col/>
            <tbody>
                <tr>
                    <td>td 1</td>
                    <td>td 2</td>
                    <td>td 3</td>
                    <td>td 4</td>
                </tr>
                <tr>
                    <td>td 1</td>
                    <td>td 2</td>
                    <td>td 3</td>
                    <td>td 4</td>
                </tr>
                <tr>
                    <td>td 1</td>
                    <td>td 2</td>
                    <td>td 3</td>
                    <td>td 4</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

CSS

table {
    border-width: 1px;
    border-style: solid;
    border-color: black;
    border-collapse: collapse;
}
table td {
    border-width: 1px;
    border-style: solid;
    border-color: black;
}
table th {
    border-width: 1px;
    border-style: solid;
    border-color: black;
    background-color: green;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select:none;
}
table th.resizing {
    cursor: col-resize;background-color: yellow;
}

JavaScript

$(function () {
    var pressed, start, index, startX, startWidth;
    var container = $("table#fixedHeaderTable");

    $("table th").mousedown(function (e) {
        start = $(this).addClass("resizing");
        index = $(this).index()
        startX = e.pageX;
        startWidth = start.width();
        pressed = true;
    });

    $(document).mousemove(function (e) {
        if (pressed) {
            var newWidth = startWidth + (e.pageX - startX);
            start.width(newWidth);
            $("#contentsTable col").eq(index).width(newWidth);
        }
    });

    $(document).mouseup(function () {
        if (pressed) {
            $(start).removeClass("resizing");
            pressed = false;
        }
    });
});