JSFiddle - React, Tailwind, and code Playground

by Luong Dung

HTML

<!-- SOVLEs remove space between inline-block elements
1. add to margin-left/right: -4px;
2. To elements on same a line
3. Add comment in html between <div> tag
4. set font-size: 0 for container
 -->
<div class="click">Click here</div>
<div class="container">
    
    <div class="left-sidebar">
        hg
    </div>
    <div class="middle-bar">
        hg
    </div>
    <div class="right-sidebar">
        hg
    </div>
</div>

CSS

.container{
    width: 100%;
    font-size: 0;
}
.left-sidebar, .middle-bar, .right-sidebar{
    display: inline-block;
    padding: 30px  10px;
    box-sizing: border-box;
    margin: 0;
    vertical-align: top;
    font-family: serif;
    font-size: 14px;
    text-align: center;
   
}
.left-sidebar{
    background-color: #00c8d2;
    width: 20%;
}
.middle-bar{
    width: 60%;
    background-color: #0c880e;
}
.right-sidebar{
    width: 20%;
    background-color: #00dd0e;
}

JavaScript

$(document).ready(function(){
	$('.click').toggle(function(){
    	$(".right-sidebar").hide();
        $(".middle-bar").animate({"width":"80%"},200);
    }, function(){
    	$(".right-sidebar").show();
        $(".middle-bar").animate({"width":"60%"},200);
    });
});