JSFiddle - React, Tailwind, and code Playground

HTML

<button id='a'>GO!!!</button>


<div class='innercontainer'>
<div id='subcontainer'>
    
</div>
</div>

<hr /><hr /><hr />

<div class='innercontainer2'>
<div id='subcontainer2'>
    
</div>
</div>

CSS

#subcontainer {
 border: 1px solid red;   
    height: 100px;
    width:100px;
    margin-left:100px;
    float:right;
}

.innercontainer {
  width:250px;
  margin-left: 30px;  
  overflow: hidden;
}

#subcontainer2 {
 border: 1px solid red;   
    height: 100px;
    width:100px;
    margin-left:100px;
 
}

.innercontainer2 {
  width:250px;
  margin-left: 30px;  
  overflow: hidden;
}

JavaScript

$("#a").click(function(){

$("#subcontainer").toggle("slow", function(){
$('#subcontainer').delay(1000, function(){ 
    $(".innercontainer").animate({
        marginLeft: parseInt($(".innercontainer").css('marginLeft'),10) == 0 ? $(".innercontainer").outerWidth() :0}); }); });
    
    
    $("#subcontainer2").toggle("slow", function(){
$('#subcontainer2').delay(1000, function(){ 
    $(".innercontainer2").animate({
        marginLeft: parseInt($(".innercontainer2").css('marginLeft'),10) == 0 ? $(".innercontainer2").outerWidth() :0}); }); });
    
    
});