JSFiddle - React, Tailwind, and code Playground

HTML

<a href='javascript:;' class='triger'>trigger</a>
<div class='container'>
    <br/>
    <div class='a'>
        container
    </div>
    <div class='b'>
        sidebar
    </div>
    <div class='clear'></div>
</div>

CSS

.container { display:block; padding:15px; width:100%; height:348px; overflow:hidden; background:#FFF; }
.container div { transition:ease-in-out 250ms all; }

.clear { clear:both; }

.a { float:left; display:block; width:70%; height:300px; background:#DDD; box-shadow:0 0 5px #555; }

.b { float:left; display:block; width:30%; height:300px; background:#FAFAFA; box-shadow:0 0 5px #F00; }

JavaScript

$(document).ready(function() {
    
    $('.triger').click(function(){
        
        $('.container .b').toggle();
        
        if ($('.b').is(':visible')){
            $('.a').css('width','70%');
        } else { 
            $('.a').css('width','100%');
        }
        
    });
    
    
});