JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table-wrapper">
    <table id="table">
        <tbody>
            <tr>
                <td class="gray">Zagreb</td>
                <td class="gray">Kinshasa</td>
                <td class="gray">Kishinev</td>
                <td class="gray">Krakow</td>
                <td class="gray">Lima</td>
                <td class="gray">Lisbon</td>
            </tr>
            <tr>
                <td>Zagreb</td>
                <td>Kinshasa</td>
                <td>Kishinev</td>
                <td>Krakow</td>
                <td>Lima</td>
                <td>Lisbon</td>
            </tr>
            <tr>
                <td>Zagreb</td>
                <td>Kinshasa</td>
                <td>Kishinev</td>
                <td>Krakow</td>
                <td>Lima</td>
                <td>Lisbon</td>
            </tr>
            <tr>
                <td>Zagreb</td>
                <td>Kinshasa</td>
                <td>Kishinev</td>
                <td>Krakow</td>
                <td>Lima</td>
                <td>Lisbon</td>
            </tr>
            <tr>
                <td>London</td>
                <td>Los Angeles</td>
                <td>Luxembourg</td>
                <td>Madrid</td>
                <td>Manila</td>
                <td>Mexico</td>
            </tr>
            <tr>
                <td>Milan</td>
                <td>Montreal</td>
                <td>Mumbai</td>
                <td>Nairobi</td>
                <td>Nicosia</td>
                <td>New York</td>
            </tr>
            <tr>
                <td>Osaka</td>
                <td>Oslo</td>
                <td>Ottawa</td>
                <td>Paris</td>
                <td>Prague</td>
                <td>Riga</td>
            </tr>
            <tr>
                <td>Rome</td>
                <td>Rotterdam</td>
                <td>Salvador</td>
                <td>Samarkand</td>
                <td>Sydney</td>
                <td>Singapore</td>
            </tr>
           ...

CSS

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 0 40px 0;
}
td {
    border: 1px #aaa solid;
    
}
#new-table {
    display: none;
}
.gray{
    background: #aaa;
}

JavaScript

$(document).ready(function(e)
{
    var $table = $("#table");
    var startW = 0;
    var startW_neighbor = 0;
    var td_index_neighbor = 0;
    var ui_minColWidth = 0;
    
    $table.find("tr:first th, tr:first td").resizable(
        {
            handles: 'e',
            minWidth: 30,
            start : function(event,ui)
            {
                ui_minColWidth = $(this).resizable( "option", "minWidth");
                startW = $(this).width();
                startW_neighbor = ui.element.parents('.table-wrapper').find('table#table').width();
            },
            stop: function (event, ui)
            {
                
            },
            resize: function (event, ui)
            {
                var td_width = ui.element.width();
                var table = ui.element.parents('.table-wrapper').find('table#table');
                var d = Number(td_width) - Number(ui.originalSize.width);
                                
                td_width = Number(startW_neighbor) + Number(d) - 2;
                table.width(td_width);
            }
        });
});