JSFiddle - React, Tailwind, and code Playground

HTML

<table class="wrapper">
    <tr>
    <td class="test" style="">current<div class="handle">handle</div></td>
    <td class="test" style="">neighbor<div class="handle">handle</div></td>
    <td class="test" style="">neighbor2<div class="handle">handle</div></td>
    </tr>
</table>

CSS

* {
    -moz-box-sizing:border-box;
    box-sizing: border-box;
}
html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
.wrapper {
     width: 100%;
    height:100%;
    max-width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    padding:0;
    margin:0;
}
.test {
    border:3px solid red;
}

JavaScript

$(document).ready(function () {
    
    var container = $(".wrapper");
    var numberOfCol = 3;
    $(".test").css('width', 100/numberOfCol +'%');
   
    var sibTotalWidth;
    $(".test").resizable({
        handles: 'e',
        start: function(event, ui){
            sibTotalWidth = ui.originalSize.width + ui.originalElement.next().outerWidth();
        },
        stop: function(event, ui){     
            var cellPercentWidth=100 * ui.originalElement.outerWidth()/ container.innerWidth();
            ui.originalElement.css('width', cellPercentWidth + '%');  
            var nextCell = ui.originalElement.next();
            var nextPercentWidth=100 * nextCell.outerWidth()/container.innerWidth();
            nextCell.css('width', nextPercentWidth + '%');
        },
        resize: function(event, ui){ 
            ui.originalElement.next().width(sibTotalWidth - ui.size.width); 
        }
    });
});