JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <div class="float-left">Left1</div>
  <div class="float-right">Right1</div>
</div>
</br>
<div>
  <div class="float-right">Right2</div>
  <div class="float-left">Left2</div>
</div>

CSS

.float-left:first-child {background: yellow;}
.float-left:last-child {background: green;}
.float-right:last-child{background: red;}
.float-right:first-child{background: blue;}