JSFiddle - React, Tailwind, and code Playground

by bluetidepro

HTML

<div class="wrap cf">
    <div class="cf leftWrap">
        <div class="innetLeftWrap">
            test
        </div>
    </div>
    <div class="cf rightWrap">
        <div class="innetrightWrap">
            test
        </div>
    </div>
</div>

CSS

body{ background: grey; margin: 0; }
.wrap { width: 100%; display: block; position: relative; margin: 0; }
.leftWrap {width: 50%; float: left; position: relative; display: block; margin: 0; min-height: 50px; background: red;}
.innetLeftWrap {float: right; margin:0; display: block; width: 300px; min-height: 30px; background: blue;}
.rightWrap {width: 50%; float: right; position: relative; display: block; margin: 0; min-height: 30px; background: yellow; box-sizing:border-box;border-left: 50px solid grey;}
.innetrightWrap {float: left; margin:0; display: block; width: 100px; min-height: 30px; background: green;}

/* clearfix */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}