JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>div's are dynamic so left/right divs will be added, so unable to fixed position them in html</li>
</ul>
<div class="left"></div>
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>

CSS

html,
body {
  margin: 0;
  padding: 0;
}

.left,
.right {
  width: 40%;
  height: 100px;
  float: left;
  clear: left;
  background: red;
  margin: 5px;
}

.right {
  float: right;
  clear: right;
  background: green;
  text-align: right;
  position: relative; 
  top: -110px; 
}