JSFiddle - React, Tailwind, and code Playground

HTML

<div id="correct">
    <div class="box">
        <div style="clear: both;"></div>
    </div>
    
    <div class="box">
        <div style="clear: both;"></div>
    </div>
    
    <div style="clear: both;"></div>
</div>

<div id="incorrect">
    <div class="box">
        <div style="clear: both;"></div>
    </div>
    
    <div class="box">
        <div style="clear: both;"></div>
    </div>
    
    <div style="clear: both;"></div>
</div>

CSS

* { box-sizing: border-box; }

#correct,
#incorrect {
    width: 800px;
    border: 1px solid red;
    padding: 5px;
    margin-bottom: 10px;
}

.box {
    min-height: 100px;
    width: 50%;
    border: 1px solid green;
    padding: 10px;
}

#correct .box {
    float: left;
}

#incorrect .box:nth-of-type(1) {
    float: left;
}

#incorrect .box:nth-of-type(2) {
    margin-left: 50%;
}