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>

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:first-of-type {
        margin-top: 0;    /*optional - if there's a preceding element on the page this will prevent it from being shifted downward*/
    }
}