JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <a href="" class="open"></a>
    <div class="container">
        <a href="" class="close"></a>
    </div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
}

.main {
    width: 100%;
    height: 100%;
    position: fixed;
    background: orange;
}

.container {
    width: 20px;
    height: 100%;
    background: green;
    position: absolute;
    right: 0;
    top: 0;
}

.close {
    width: 100px;
    height: 50px;
    background: red;
    display: block;
}
.open {
    width: 100px;
    height: 50px;
    background: blue;
    display: block;
    position: absolute    top: 0;
    right:300px;
}

JavaScript

$('.open').toggle(
        function () {
            $('.container').animate({
                right:"-300px"
            }, 500);
            $('.open').animate({
                right:"0px"
            }, 500);
        },
        function () {
            $('.container').animate({
                right:"0px"
            }, 500);
            $('.open').animate({
                right:"300px"
            }, 500);
        });
    $('.close').toggle(
        function () {
            $('.container').animate({
                right:"-300px"
            }, 500);
            $('.open').animate({
                right:"0px"
            }, 500);
        },
        function () {
            $('.container').animate({
                right:"0px"
            }, 500);
            $('.open').animate({
                right:"300px"
            }, 500);
        });