JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrapper">
<div id="div-image">div image</div>
<div id="div-maincontent">
<div id="div-sidebar">
div sidebar
</div>
div maincontent
<button>click to add content</button>
<br />
<span></span>
</div>
</div>
CSS
html, body {
margin:0;
padding:0;
}
#wrapper {
position:relative;
}
#div-image {
position:absolute;
left:0;
top:0;
width:200px;
height:100px;
background-color:#cef;
}
#div-sidebar {
position:absolute;
left:-200px;
top:100px;
bottom:0;
width:200px;
background-color:#efc;
}
#div-maincontent {
position:absolute;
left:200px;
right:0;
top:0;
background-color:#fce;
min-height:300px;
}
JavaScript
$("button").click(function() {
$(this).parent().children("span").html($(this).parent().children("span").html() + 'uguu<br/>uguu<br />');
});