JSFiddle - React, Tailwind, and code Playground

by flackend

HTML

<div class="header">
    <a href="#">make header larger</a>
</div>

<div class="sidebar"></div>
<div class="content"></div>

CSS

a {
    color: white;
}

.header {
    background: aqua;
    width: 100%;
    height: 40px;
}

.sidebar, .content {
    position: absolute;
    top: 40px;
    bottom: 0;
}

.sidebar {
    background: rgba(0,0,0,0.8);
    left: 0;
    right: 81%;
}

.content {
    background: rgba(0,0,0,0.4);
    left: 20%;
    right: 0;
}

JavaScript

$('a').on('mousedown', function() {
    $('.header').animate({
        'height': '120px'
    });
});