JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cont">
       <div  id="groupL" class="innDiv">
           <div id="1" class="aaaL">Value 1</div>
           <div id="2" class="aaaL">Value 2</div>
       </div>
       <div  id="groupR" class="innDiv">
           <div id="4" class="aaaR">Value 4</div>
           <div id="3" class="aaaR">Value 3</div>
       </div>
</div>

CSS

.cont { width:400px }
.innDiv { width:196px; display: inline-block;border: 1px solid red; vertical-align:top }
.aaaL, .aaaR{ height:50px; background-color:#ccc; cursor:pointer;border:1px solid black;margin:5px}

JavaScript

var clickLtoR  = function(n){
    _this = $('#'+n);
    $('#groupR').prepend('<div class="aaaR" id="'+n+'">'+_this.html()+'</div>');
    _this.remove();
    updateHeightContainer();
}

var clickRtoL = function(n){
    _this = $('#'+n);
    $('#groupL').prepend('<div class="aaaL" id="'+n+'">'+_this.html()+'</div>');
    _this.remove();
    updateHeightContainer();
    
}

$('.aaaL').click(function(){
    clickLtoR($(this).attr("id"));
});
$('.aaaR').click(function (){
    clickRtoL($(this).attr("id"));
});