JSFiddle - React, Tailwind, and code Playground

HTML

collapsing margin
<div style="width:200px;background-color:red">
    <div style="width:50%;float:left;">
        left side
    </div>
    <div style="margin-left:50%;width:50%;margin-top:10px;">
        right side
    </div>
</div>
<hr />
non collapsing margin
<div style="width:200px;border:1px solid red">
    <div style="width:50%;float:left;">
        left side
    </div>
    <div style="margin-left:50%;width:50%;margin-top:10px;">
        right side
    </div>
</div>