JSFiddle - React, Tailwind, and code Playground
HTML
<div id="left"></div>
<div id="content"></div>
CSS
#left {
background: red;
float: left;
height: 20px;
width: 20px;
}
#content {
background: yellow;
height: 100px;
margin: 0 auto;
width: 200px;
}
JavaScript
var contentWidth = $('#content').width();
var leftWidth = $('#left').width();
$('#content').click(function() {
var allwidth = contentWidth + leftWidth*2;
var windowWidth = window.innerWidth;
alert(allwidth);
alert(windowWidth);
});
window.onresize = function(event) {
var windowWidth = window.innerWidth;
if (windowWidth <= (contentWidth + (leftWidth*2))) {
$('#content').css('margin-top', leftWidth);
} else {
$('#content').css('margin-top', 'auto')
}
}