JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sidepanel">
    <p>content</p>
</div>
<div class="rightpanel">
    <button class="menu">menu</button>
</div>

CSS

.sidepanel {
    background-color: blue;
    float:left;
    width: 5%
}

.rightpanel {
    background-color: pink;
    float:left;
    width: 95%;
}

JavaScript

$(document).ready(function() {
    $('.menu').click(function() {
        var width = 100 * parseFloat($('.sidepanel').css('width')) / parseFloat($('.sidepanel').parent().css('width'));
        width = Math.round(width) + '%';
        if(width === "5%") {
            $('.sidepanel').animate({"width": "30%"});
            $('.rightpanel').animate({"width": "70%"});
        } else {
            $('.sidepanel').animate({"width":"5%"});
            $('.rightpanel').animate({"width":"95%"});
        }
    });
});