JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main_wrap">
    <header>Header</header>
    <div class="wrapper">
        <div class="floated_left">
            This<br />
            is<br />
            just<br />
            a<br />
            left<br />
            floated<br />
            column<br />
        </div>
         <div class="floated_right">
            This<br />
            is<br />
            just<br />
            a<br />
            right<br />
            floated<br />
            column<br />
        </div>
    </div>
</div>

CSS

* {
    -moz-box-sizing: border-box;
    -webkkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.main_wrap {
    margin: 20px;
    border: 3px solid black;
    width: 520px;
}

header, footer {
    height: 50px;
    border: 3px solid silver;
    text-align: center;
    line-height: 50px;
}

.wrapper {
    border: 3px solid green;
    overflow: hidden;
}

.floated_left {
    float: left;
    width: 200px;
    border: 3px solid red;
    box-shadow: 0 0 50px #000;
}

.floated_right {
    float: right;
    width: 300px;
    border: 3px solid red;
    box-shadow: 0 0 50px #000;
}

.clear:after {
    clear: both;
    content: "";
    display: table;
}