JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <table>
    </table>
    <table>
    </table>
    <table>
    </table>    
</div>

CSS

table {
    width: 300px;
    height: 250px;
    background:green;
float:left;
}

table:nth-child(2) {
    width: 100px;
    background: red;
}
table:nth-child(3) {
    width: 150px;
    background:gray;
}



div {
    background: blue;
    width: auto;
}

JavaScript

var d= $('div');
 var w;
 

d.children().each(function(){
 w = w + $(this).outerWidth();
 d.css('width', w + 'px')
});