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){
        var sidebar = $('#sidebar-wrapper');
        var content = $('#page-content-wrapper');
        var width, paddingleft;
        event.preventDefault();
        if(sidebar.width() == 0){
            width = 221;
            paddingleft=230;
        }else{
            width = 0;
            paddingleft=10;
        }
        sidebar.animate({width: width}, {duration:600,queue:false});
        content.animate({paddingLeft: paddingleft},{duration:600,queue:false});
    });