JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="header"><p>Header</p></div>
<div id="content"><p>Content</p></div>
<div id="sidebar"><p>Sidebar</p></div>
<div id="footer"><p>Footer</p></div>
</body>

CSS

html{}

body{width:90%;margin:auto;}

#header{width:100%;display:inline-block;width:100%;background-color:red;}

#sidebar{float:right;width:250px;background-color:yellow;}

#content{float:left;width:auto;display:inline-block;background-color:blue;}

#footer{clear:both;background-color:brown;}

JavaScript

function getCssProperty(elmId, property){
   var elem = document.getElementById(elmId);
   return window.getComputedStyle(elem,null).getPropertyValue(property);
}

var contentwidth = document.getElementById("content").style.width;

var sidebarwidth = getCssProperty("sidebar","width");

var headerwidth = getCssProperty("header","width");

if(document.getElementById("sidebar"))
{
    contentwidth = headerwidth-sidebarwidth;
}
else
{
    contentwidth = headerwidth;
}