JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sidebar"> 
	<div class="sidebar-menu">
        <div id="SideBox"></div>
       
	</div>
</div>
<div id="content">
 <div id="MainBox"></div>
</div>

CSS

#sidebar {
       width: 49%;
}
#content {
	width: 49%;
        float: left;
}

#SideBox {
height:500px;
border: 1px solid;    

}

#MainBox{
height:500px;
border: 1px solid;       
}

JavaScript

$(document).ready(function() {
    $( "#sidebar" ).resizable({      
    });
    $("#sidebar ").bind("resize", function (event, ui) {
            var setWidth = $("#sidebar").width();
            $('#content).width(1224-setWidth);
            $('.menu).width(setWidth-6);
        });
  });