JSFiddle - React, Tailwind, and code Playground

HTML

<div style="display:none">
<div id="1" class="left" style="height:100px;background-color:yellow;">DIV 1</div>
<div id="2" class="right col-sm-6" style="height:20px;">DIV 2</div>
<div id="3"  class="left col-sm-6" style="height:50px;background-color:yellow;">DIV 3</div>
<div id="4" class="right col-sm-6" style="height:170px;">DIV 4</div>
<div id="5" class="left col-sm-6" style="height:120px;background-color:yellow;">DIV 5</div>
<div id="6" class="right col-sm-6" style="height:30px;">DIV 6</div>
<div id="7" class="left col-sm-6" style="height:50px;background-color:yellow;">DIV 7</div>
<div id="8" class="right col-sm-6" style="height:90px;">DIV 8</div>
</div>
<div id="div1" style="width: 50%;background-color:grey"></div>
<div id="div2" style="width: 50%;background-color:blue"></div>

CSS

div 
{
    outline:solid 1px red; 
}
.left 
{
    /*max-width:50%;
    width: 50%;
    float:left;*/
    /*clear:left;*/
    
} 
.right 
{
    /*max-width:50%;
    width: 50%;
    float:right;*/
    /*clear: right;*/
}

JavaScript

$('#div1').css("float", "left");
$('#div2').css("float", "right");

$('#div1').append($('.left'));
$('#div2').append($('.right'));