JSFiddle - React, Tailwind, and code Playground

HTML

<label><input type="checkbox" id="lb" checked="checked" />Left</label>
<br />
<label><input type="checkbox" id="rb" checked="checked" />Right</label>
<div id="container">
    <div id="left">Left</div>
    <div id="right">Right</div>
    <div id="content">Content</div>
</div>

CSS

#left{
    float: left;
    height: 100px;
    width: 98px;
    border: 1px solid red;
}
#right{
    float: right;
    height: 150px;
    width: 118px;
    border: 1px solid green;
}
#content {
    margin: 0;
    height: 200px;
    border: 1px solid blue;
}

#content:after {
clear: both;
}

/*magic here*/
#left ~ #content {
    margin-left: 100px;
}
#right ~ #content {
    margin-right: 120px;
}

JavaScript

$("#lb").change(function(){
    if(this.checked) {
        $("#container").prepend('<div id="left">Left</div>');
    } else {
        $("#left").remove();
    }
});
$("#rb").change(function(){
    if(this.checked) {
        $("#container").prepend('<div id="right">Right</div>');
    } else {
        $("#right").remove();
    }
});