JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
     <h1>Sidebar Area</h1>
</div>
<div id="content">
     <h1>Content Area</h1>
</div>
<hr />
<button id="bmarg">use marginLeft</button>
<button id="boffs">use offsetLeft</button>

CSS

#wrapper {
    background-color:blue;
}
#content {
    width:200px;
    background-color:red;
    margin:0 auto;
}
#boffs {float: right}

JavaScript

$(document).ready(function () {

$("#bmarg").click(function() {
    var w = $('#content').css("margin-left");
    $('#wrapper').css("width", w);
}).trigger('click');

$("#boffs").click(function() {
    var con = $("#content"),
        cpos = con.css('position'),
        par, w;
    if (cpos === 'static' || cpos === 'relative') {
        par = con.parent();
    } else par = con.offsetParent();
    w = con.offset().left - par.offset().left;
    $("#wrapper").css('width', w);
});
    
});