JSFiddle - React, Tailwind, and code Playground

HTML

<button>click</button>

<div class="layout">
    <header>
        <div class="corner"></div>
        <div class="header"></div>
    </header>
    <footer>
        <div class="column"></div>
        <div class="content"></div>
    </footer>
</div>

CSS

.layout {
    width: 200px;
    height: 200px;    
    background: red;
}
header {
    width: 100%;
    height: 50px;
}
.corner {
    width: 50px;
    background: green;
    height: 100%;
    float: left;
}
.header {
    background: blue;
    height: 100%;
    width: calc(100% - 50px);
    float: left;
}

footer {
    height: calc(100% - 50px);
    width: 100%;
}

.column {
    width: 50px;
    background: yellow;
    float: left;
    height: 100%;
}
.content {
    background: grey;
    float: left;
    height: 100%;
    width: calc(100% - 50px);
}

JavaScript

var i = 0;
$('button').on('click', function(){
    var s = 200+((++i)&1)*100;
    $('.layout').animate({
        width: s,
        height: s
    });
});