JSFiddle - React, Tailwind, and code Playground

HTML

<section class="top cf">
    <h1>test</h1>
    <p>some content</p>
    <div class="floated-div">
        <h2>aside content</h2>
        <p>some aside content</p>        
        <p>some aside content</p>
    </div>
</section>
<section class="bottom">
</section>

CSS

.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.top {
    height:auto;
    background:#f1f1f1;
}
.top > h1,
.top > p {
    position: absolute;
    width: 60%;
    left: 10px;
}
.top > p {
    top: 40px;
}
.floated-div {
    width:30%;
    float: right;
}
.bottom{
    width: 100%;
    height:100px;
    background:#d1d1d1;
}