JSFiddle - React, Tailwind, and code Playground

HTML

<div class="l">LEFT</div>
<div clasS="r">RIGHT</div>
<br>
<a>TOGGLE R</a>

CSS

div.l {
    float: left;
    background-color: red;
    width: 100%;
}
div.r {
    display: none;
    float: right;
    background-color: blue;
    width: 50%;
}

JavaScript

(function($) {
    var visible = false;
    
    $("a").click(function(event) {
        event.preventDefault();
        
        $("div.r").toggle();
        $("div.l").css("width", 50+(visible*50)+"%");
        visible = !visible;
    });
    
})(jQuery);