JSFiddle - React, Tailwind, and code Playground

by Praveen Sinha

HTML

<div class='header'>This is header</div>
<div class="container_1">
    <div class="right">right content fixed width.</div>
    <div class="left">
        <div class="container_2">
            <div class="left_2">left content fixed width.</div>
            <div class="right_2">flexible middle column.</div>
            <div class='clearfix'></div>
        </div>
    </div>
    <div class='clearfix'></div>
</div>
<div class='footer'>This is footer</div>

CSS

div {
    border:1px solid #000;
}
.header {
    padding: 1%;
}
.footer {
    padding: 1%;
    text-align: center;
}
.container_1 {
    height: auto;
    overflow: hidden;
}
.container_1 .right {
    width: 110px;
    float: right;
    background: #ddd;
}
.container_1 .left {
    width: auto;
    overflow: hidden;
}
.container_2 {
    height: auto;
    overflow: hidden;
}
.container_2 .left_2 {
    background: #B28262;
    float: left;
    width: 100px;
}
.container_2 .right_2 {
    background: none repeat scroll 0 0 #E8F6FE;
    overflow: hidden;
    width: auto;
}
.clearfix {
    clear:both;
    margin:0;
    padding:0;
    display:none;
}