JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test4">
            Normal Flow
        </div>

        <div class="test5">
            Floated
        </div>

        <div style="margin-top: 100px">
            Has a top margin
        </div>

        <div style="clear: both; border:1px solid gold;">
            <div class="floatedRect"></div>
            <div class="text">some text</div>
            <div class="floatedRect"></div>
            <div class="text">some text</div>
            <div class="floatedRect"></div>
            <div class="text">some text</div>
        </div>

CSS

* {
    margin: 0px ;
    padding: 0px ;

    font-family: courier ;
    font-size: small ;
}

.test4 {width: 200px; height: 100px; border-style: solid; border-width: 1px;}
.test5 {border: 1px solid red; width: 200px; height: 50px; float: left; }

.floatedRect {
    width: 50px ;
    height: 50px ;
    float: left ;
    background-color: #9cf ;
}

.text {
    margin: 10px ;
}