JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left">left one</div>
<div class="left">left two</div>
<div class="right">right one</div>
<div class="left">left three</div>
<div class="right">right two</div>
<div class="right">right three</div>
<div class="left">left four</div>
<div class="right">right four</div>
<div class="right">right five</div>
<div class="left">left five</div>
<div class="right">right six</div>
<div class="right">right seven</div>
<div class="right">right eight</div>
<div class="right">right nine</div>
<div class="right">right ten</div>
<div class="right">right eleven</div>
<div class="right">right twelve</div>
<div class="left">left six</div>
<div class="right">right thirteen</div>
<div class="right">right fourteen</div>
<div class="left">left seven</div>
<div class="right">right fifteen</div>
<div class="right">right sixteen</div>

CSS

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

.right { 
    float:right; 
    background: mediumaquamarine; 
    margin-bottom: 5px;
    position: relative;
    top: -46px; /** this value should be the height of the elements added together (including the margins) on the left side BEFORE the first element on the right side... in this case it would be 'left one' and 'left two' before 'right one' **/
}

@media (max-width:400px){
    .left, .right  {
        width:100%;
    }
}
@media (min-width:400px){
    .left {
        width: 60%;
        margin-right: 10%;
    }
    .right {
        width: 30%;
        clear: right;
    }