JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div id='sidebar-wrapper'>
        
        <div id='page-content-wrapper'>  
        </div>   
    </div>    
     
</div>

<button type="button" id="toggle">Toggle</button>

CSS

#sidebar-wrapper {
    position: fixed;
    left: 0px;
    width: 60%;
    height: 10%;
    
    max-width: 200px;    
    background-color: red;
    z-index: 999;
  }
  
  #page-content-wrapper {
    position: absolute;
    width: 67%;
    height: 100px;
    z-index: 1;    
    left: 100%;
    background-color: green;
  }
#toggle{
    margin-top: 110px;
}

JavaScript

$("#toggle").click(function (){                       
    if($("#sidebar-wrapper").css('left') == "0px"){
        $("#sidebar-wrapper").animate({left: "-200px"}, 1000);      
    }
    else{
        $("#sidebar-wrapper").animate({left: "0px"}, 1000);   
    }
});