JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainContainer">
    <div id="panel" class="sidebar">sidebar</div>
    <div id="toggleDiv"><</div>
    
</div>

CSS

#toggleDiv
{  
height: 50px;
width: 20px;
    float:right; 
 border:solid 1px #c3c3c3; 
}
#panel
{
padding:50px;
display:none;
height: 200px;
width: 200px;
    float:right;
background-color: lime;
}

#panel,#toggleDiv
{
 padding:5px;
 text-align:center;
 border:solid 1px #c3c3c3;
}

#mainContainer
{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

JavaScript

$(function()
  {
      var expanded = false;
      $('#toggleDiv').click(function(){
          $("#panel").toggle("slide", {direction:'right'}, 500);
      });
  });