JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scroller_wrapper">
    <div id="scroller">
    </div>
</div>
<div id="container_wrapper">
    <div id="container">
        <table class="subnetTable"><tr><td>12341234</td></tr></table>
<table class="subnetTable"><tr><td>12341234 123412341234 1234123412 34123412341 2341234123412 341234123 412341234</td></tr></table>
<table class="subnetTable"><tr><td>12341234</td></tr></table>
<table class="subnetTable"><tr><td>12341234   123412341 2341234123412 34123412341234 123412341 23412341234</td></tr></table>
<table class="subnetTable"><tr><td>12341234   1234123412 341234123412 34123412341234 123412341 23412341234</td></tr></table>
<table class="subnetTable"><tr><td>12341234   123412341 2341234123412 34123412341234 123412341 23412341234</td></tr></table>

    </div>
</div>

CSS

.subnetTable {
    	width: 150px;
    	display: inline-table;
    	border:1px solid #E8E8E9;
    	margin: 2px;
    	padding: 2px;
    	white-space: normal;
    }
    
    #scroller_wrapper, #container_wrapper{
    	width: 98%; border: none 0px RED;
    	overflow-x: scroll; overflow-y:hidden;
    }
    #scroller_wrapper{height: 16px; }
    #scroller { width: 500px; height: 16px; }
    #container { width: 500px; overflow: auto;}

JavaScript

$(function(){
    $("#scroller_wrapper").scroll(function(){
        $("#container_wrapper")
            .scrollLeft($("#scroller_wrapper").scrollLeft());
    });
    $("#container_wrapper").scroll(function(){
        $("#scroller_wrapper")
            .scrollLeft($("#container_wrapper").scrollLeft());
    });
});

		// CONTAINER RESIZE
$(window).load(function () {
    $('#scroller').css('width', ($(window).width() - 10) );
    $('#container').css('width', ($(window).width() - 10) );
});