JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">header bar </div>
    <div class="wraper">
        <div id="container2">
    <div id="container1">
        <div id="sidebar">
            This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text 
        </div>
        <div id="content">
           This is dummy text here This is dummy text here This is dummy 
        </div>
    </div>
</div>
    </div>
        <div class="footer">Footer bar</div>

CSS

.wraper, .header, .footer{
width:80%;
    margin:0 auto;
    overflow:hidden;
    border:solid 2px red;
}


.header{
    height:100px;
    background:green;
    border-color:darkred;
}


.sidebar{
width:20%;
    background:yellow;
    float:left;
}


.content{
width:70%;
    background:pink;
    float:right;
}

.footer{
    height:100px;
    background:blue;
    border-color:black;
}




#container2 {
background: none repeat scroll 0 0 #FFA7A7;
clear: left;
float: left;
overflow: hidden;
width: 100%;
}

#container1 {
background: none repeat scroll 0 0 #FFF689;
float: left;
position: relative;
right: 75%;
width: 100%;
}


#sidebar {
float: left;
left:76%;
overflow: hidden;
position: relative;
width: 20%;
text-align: justify;
}


#content {
    float: left;
    left: 81%;
    overflow: hidden;
    position: relative;
    text-align: justify;
    width: 72%;
    height:100%;
}