JSFiddle - React, Tailwind, and code Playground

HTML

Click on th and drag...
<br><br>
<div id="wrapper">
<table id="container">
    <thead>
        <tr>
            <th>th 1</th>
            <th>th 2</th>
            <th>th 3</th>
            <th>th 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>td 1</td>
            <td>td 2</td>
            <td>td 3</td>
            <td>td 4</td>
        </tr>
    </tbody>
</table>
</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;
}

table th.resizing {
    cursor: col-resize;
}

JavaScript

$(function() {
    var pressed;
    var start;
    var startX;
    var startWidth;
    var wrapper = $("div#wrapper");
    var container = $("table#container");
    var initialWidths = new Array();
    //console.log($("table th").length);
    $("table th").mousedown(function(e) {
        start = $(this);
        startX = e.pageX;
        startWidth = $(this).width();
        $(start).addClass("resizing");
        pressed = true;
        var index = $(this).index();
        if(!initialWidths[index]){
            initialWidths[index] = startWidth;
        }
     }).dblclick(function(e){
        var index = $(this).index();
        if(initialWidths[index]){
            start.width(initialWidths[index]);
        }
    });
    
    $(document).mousemove(function(e) {
        if(pressed) {
            var newWidth = startWidth + (e.pageX - startX);
            start.width(newWidth);
            wrapper.width(container.width() + 10);
        }
    });
    
    $(document).mouseup(function() {
        if(pressed) {
            $(start).removeClass("resizing");
            pressed = false;
        }
    });
});