JSFiddle - React, Tailwind, and code Playground

by ZondArt

HTML

<div class="clearfix">
    <div class="box-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae fugiat cum. Eligendi odio molestias eius ipsa vel culpa excepturi accusamus repellat laboriosam unde veniam id aut laborum ipsam rem ullam.</div>
<p class="after-p">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium ullam deleniti perspiciatis sequi. Suscipit cumque similique praesentium mollitia consectetur dolor totam quaerat id distinctio quam. Molestiae minus nam illum odio.
</p>
</div>

CSS

.clearfix {
    width: 1000px;
    background-color: #ccaaaa;
}

.after-p {
    clear: both;
}

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

.box-1, .box-2, .box-3 {
    float: left;
}

.box-1 {
    width: 50%;
    background-color: #ffA;
}
.box-2 {
    width: 30%;
    background-color: #fAf;
}
.box-3 {
    width: 20%;
    background-color: #AFF;
}