JSFiddle - React, Tailwind, and code Playground

by merganser

HTML

<div id="container">
    
    
    <div id="col1">
        <!-- Column one start -->        
        <div class="standardPadding">
        	<h3>Application Title</h3>   
            
        </div>
        <!-- Column one end -->
    </div>
    
    
    
    <div id="col2">
        <!-- Column two start -->
        <div id="row1"> 
            <div class="standardPadding">
                <a id="navigation" href="javascript:;" class="u-pull-left">&#9776;</a>                
            </div>
        </div>
        <div id="row2">
           Row 2
        </div>
        <!-- Column two end -->
    </div>
</div>

CSS

#navigation{margin-top:50px;} 

#container {
    background:#8C8C8C;
       
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    
}
#col1 {
    background:#8C8C8C;   
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
    right:50px;
    
    
    -webkit-transition: display 0.3s ease-in;
    -moz-transition: display 0.3s ease-in;
    -o-transition: display 0.3s ease-in;
    -ms-transition: display 0.3s ease-in;
    transition: display 0.3s ease-in;
}

#col2 {
    background:#404040;
    
    position:absolute;
    top:0px;    
    bottom:0px;
    right:0px;
    width:50px;
    
    
    -webkit-transition: width 0.3s ease-in;
    -moz-transition: width 0.3s ease-in;
    -o-transition: width 0.3s ease-in;
    -ms-transition: width 0.3s ease-in;
    transition: width 0.3s ease-in;
    
}
#col2 div#row1 {  
    background: #3b8fcd;
    color:white;
    padding-top:50px;
}
#col2 div#row2 {    
    background:#404040;
    color:black;
}

#container.hidemenu #col1{display:none;}
#container.hidemenu #col2{width:100%;}

.accordion h3 a {
    display: block;
    font-weight: normal;
    padding: 1em 0;
}
.accordion h3 a:hover {
    text-decoration: none;
}
.accordion h3 + div {
    height: 0;
    overflow: hidden;
    -webkit-transition: height 0.3s ease-in;
    -moz-transition: height 0.3s ease-in;
    -o-transition: height 0.3s ease-in;
    -ms-transition: height 0.3s ease-in;
    transition: height 0.3s ease-in;
}
.accordion :target h3 a {
    text-decoration: none;
    font-weight: bold;
}
.accordion :target h3 + div {
    height: auto;
}
.accordion .section.large:target h3 + div {
    overflow: auto;
}

JavaScript

var isopen=true;

$(document).ready(function(){
    $("#navigation").click(function(){
        if(isopen)
        {
            $("#container").addClass("hidemenu");
            isopen=false;
        }
        else
        {
            
            $("#container").removeClass("hidemenu");
            isopen=true;
        }
    });
});