JSFiddle - React, Tailwind, and code Playground

by Gereltod Gotsbayar

HTML

<div id="left-column">left</div>
<div id="body">lorem ipsum dolor sit amet</div>

CSS

#left-column {
    padding: 5px;
    background-color: #ddd;
    width: 5%;
    float: left;
}
#body {
    float: left;
    margin-left: 5%;
}

JavaScript

$(document).ready(function () {
    
    $('#left-column').toggle(function () {
        $('#left-column').animate({
            'width': '20%'
        }, 100);
        $('#body').animate({
            'margin-left': '20%'
        }, 100);
    }, function () {
        $('#body').animate({
            'margin-left': '5%'
        }, 100);
        $('#left-column').animate({
            'width': '5%'
        }, 100);
    });
    

});