JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left">left one</div>
 <div class="right">right one</div>
 <div class="left">left two</div>
  <div class="right">right two</div>
<div class="left">left three</div>
 <div class="right">right three</div>
 <div class="right">right four</div>
 <div class="right">right five</div>

CSS

.left {float:left; background: coral; margin-bottom: 5px;}
.right {float:right; background: mediumaquamarine; margin-bottom: 5px;}

@media (max-width:400px){
    .left, .right  {
        width:100%;
    }
}
@media (min-width:400px){
    .left {
        float: left;
    clear : left;
    }
    .right {
        float: right;
        display: inline-block;
        margin-left: 10%;
    clear : right;
    }
}