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="left">left one</div>
<div class="left">left two</div>
<div class="left">left one</div>
<div class="left">left two</div>
<div class="left">left one</div>
<div class="left">left two</div>
<div class="left">left one</div>
<div class="left">left two</div>
<div class="left">left one</div>
<div class="left">left two</div>
<div class="left">left one</div>
<div class="left">left two</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 {
        width: 60%;
        margin-right: 10%;
    }
    .right {
        width: 30%;
        float: none;
        margin-left: 100%;
        transform: translateX(-100%);
        margin-bottom: -1.2rem;
        margin-top: calc(1.2rem + 5px);
    }
    .right.last {
        margin-top: 0;
    }
}

JavaScript

var rights = document.querySelectorAll(".right");
rights[rights.length-1].className += " last";