JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div id="sidebar"> <p>This is a sidebar</p> </div>
</div>
<button>Animate</button>

CSS

.container{
    margin:0 auto;
    width:100%;
    height:400px; 
    background-color:#eee;    
}
#sidebar{
    width:100px;
    height:300px; 
    background-color:#F000F0; 
    position: relative; /*make sidebar's position relative to its containing div*/
    left: 0; /*start sidebar off screen  */ 
    bottom: auto;
}

JavaScript

//$(document).ready(function{
var containerPos = $('.container').offset().left; // This can be used to measure containers distance from window.
$('button').click(function(){
    $('#sidebar').animate({
    bottom: 0 //This value of 0 is how far you want the sidebar to animate. eg. a value of 100 will animate it 100 pixels from the left of the container div, not the window.
  });
});
//});