JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test one">
    <div class="register half">
        <p>We float left</p>
    </div>
    
    <div class="message p30">
        <p>Paragraph after floated element</p>
    </div>
</div>
<div class="test two">
    <div class="register half">
        <p>We float left</p>
    </div>
    
    <div class="message p60" >
        <p>Paragraph after floated element</p>
    </div>
</div>
<div class="test three">
    <div class="register full">
        <p>We float left</p>
    </div>
    
    <div class="message p30" >
        <p>Paragraph after floated element</p>
    </div>
</div>

CSS

/* These are just to separate the three tests in the smae 
 * JSFiddle
 */
.test { 
    box-sizing:border-box; 
    border:1px solid transparent; 
    margin-bottom:5px; 
} 
.test:after { 
    content:'\A0'; 
    clear:both; 
}

/* the float */
.register { 
    float: left;
    margin:0;
    padding: 0;
    list-style: none;
    color: #690;
    background: #BDDB62;
}

.register.half {
    width: 50%;
}

.register.full {
    width: 100%;
}

/* The normal flowed boxes */
.message {
    background: #92B91C;
}

.message p {
    background: red;
    margin-top:-3px;
    margin-left:-3px;
}

.message.p30 p {
    padding-top :30px;
}

.message.p60 p {
    padding-top :60px;
}