JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cards closeMenu" style="height: 100%;" >
    <div class="slide_panel_wrap">menu</div>
    <button>---</button>
    content
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.slide_panel_wrap {
    width:49%;
    height:100%;
    margin: 0 0 0 -50%;
    float: left;
    border-style: none;
    padding: 0;
    overflow: scroll;
}
.closeMenu {
    margin: 0 0 0 -50%;
}
div.cards {
    transition: all 1s;
    -webkit-transition: all 1s;
    width: 100%;
    padding: 0 0 0 50%;
}

JavaScript

$(document).ready(function () {
    $("button").click(function () {
        $(".cards").toggleClass("closeMenu");
    });
});