JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
<div class="left">
</div>
<div class="right">
</div>    
</div>

CSS

.wrapper{
    width:500px;
    height:500px;
    background:#E2E2E2;
    position:relative;
    overflow:hidden;
}
.left{
    width:100px;
    height:500px;
    float:left;
    background:#F1F1F1;
    position:absolute;
    left:0px;
}

JavaScript

$(document).ready(function(){
    first();
    function first(){   
     $(".left").animate({
         "left": "-=200px" 
     }, 600, function(){
         $(".left").css("left", "500px");
     });
        
     $(".right").animate({
         "left": "0px"
      }, 600, function(){
          second();
      });
    };
    function second(){
        $(".right").animate({
            "left": "-=100px"
        }, 600, function(){
            $(".right").css("left", "300px");
        });
        
        $(".left").animate({
          "left": "0px"
        }, 600, function(){
            first();
        });
        
      };
});