JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="btn navbar-btn btn-toggle pull-left" id="menu-toggle">Toggle</a>

<div id="sidebar-wrapper">
        
</div>
    
<div id="page-content-wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
            </div>
        </div>
    </div>
</div>

CSS

/* Sidebar */
#sidebar-wrapper{
    z-index: 1;
    position:absolute;
    width:221px;
    height:100%;
    overflow-y: hidden;
    background-color: #f1f3f3;
    opacity:0.9;
    margin-top: 51px;
    margin-bottom: -51px;
    box-shadow:  7px 0 9px -7px rgba(0, 0, 0, 0.2);

}

/* Main Content */
#page-content-wrapper{
    width:100%;
    position:absolute;
    background-color: #f1f1f1;
    height:100%;
    padding-left:230px;
    padding-top: 66px;
    display:block; !important;
}

JavaScript

$("#menu-toggle").click(function(event){
        event.preventDefault();
        if($('#sidebar-wrapper').width() == 0){
            $("#sidebar-wrapper").animate({
                width: 'toggle'
            }, {
                duration: 600,
                queue: false,
                complete: function() { /* Animation complete */ }
            });$("#page-content-wrapper").animate({
                paddingLeft: 'toggle'
            }, {
                duration: 600,
                queue: false,
                complete: function() { /* Animation complete */ }
            });
        }else{
            $("#sidebar-wrapper").animate({
                width: 'toggle'
            }, {
                duration: 600,
                queue: false,
                complete: function() { /* Animation complete */ }
            });$("#page-content-wrapper").animate({
                paddingLeft: 'toggle'
            }, {
                duration: 600,
                queue: false,
                complete: function() { /* Animation complete */ }
            });
        }
    });