JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="content"></div>
    <div id="sidebar"></div>
    <div class="clearfix"></div>
</div>

CSS

#container {
    margin-top: 30px;
    display: block;
    border: 1px solid #CFCFCF;
    background-color: #000;
    padding:10px;

}

#sidebar {
    width: 100px;
    float: right;
    background: #FF00FF;
    height: 400px;
}

#content {
    width: 100%;
    float: left;
    background: #0000FF;
    height: 400px;
    margin-right:-100px;
}

.clearfix:before,
.clearfix:after {
    content: "\0020"; 
    display: block; 
    height: 0; 
    visibility: hidden; 
}
.clearfix,
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }