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; /* I need this to position to left of screen with a static value */
    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{
   left: calc(-100% - 6px); /* I need this to position to left of screen with a static value */
}