JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a"><div>AAAAAA</div>AAAAAA<br/>AAAAAA</div>
 <div></div>
<div id="b"><div>BBBBBB</div>BBBBBB<br/>BBBBB</div>

With no margin, the right-hand "BBBBBB" float appears at flush-right, aligned with the right-hand "AAAAAA" float. But use a negative margin to shift the bottom element up, and the top float now displaces the bottom float. Hopefully the CSS gurus have a better answer, but the simplest fix is to insert a div between the two elements.

CSS

#a div, #b div { float: right; }
#a { background: #bada55; }
#b { background: #d1ceee; margin-top: 0em; }
/* see what happens when you change the^^^^^ margin-top to 0 */