JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sideParent">
    <div id="sideChild"></div>
</div>

CSS

#sideParent {
    position: absolute;
    top: 150px;
    bottom: 0px;
    right: 0px;
    width: 300px;
    border-top: 3px solid black;
    border-left: 3px solid black;
    text-align: center;
    background-color:red;
}
#sideChild {
    position: absolute;
    top: 0px;
    left: 0; 
    right: 0px;
    height: 100%;
    width: 100%;
    background-color: blue;
    z-index: 100;
    border-right: 3px solid black;
    transition: all 2s;
    -webkit-transition: all 2s; /* Safari */
}
#sideParent:hover #sideChild{
   /* Taking borders into account with calc, if not necessary only use 100%*/
  /* left: calc(-100% - 6px); */
}

JavaScript

var $mainDiv    = $('#sideParent');
var $sideChild  = $mainDiv.children('#sideChild');
var leftOffset  = $mainDiv.position().left;

$mainDiv.hover(
    function(){
        $sideChild.css('left', '-' + leftOffset + 'px');
    },
    function(){
         $sideChild.css('left', '0px');
    }
              
 );