JSFiddle - React, Tailwind, and code Playground

HTML

<section class="div-wrapper">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
</section>

CSS

body {

 
    height: 100vh;
}
.div-wrapper {
    display: flex;
    flex-flow: row wrap;
    height: 400px;
    width: 320px;
}
div {
    height: 200px;
    width: 300px;
}
.one {
    background-color: #428BCA;
    border-radius: 10px 0px 0px 0px;
    box-shadow: 0px -5px 7px 0px rgba(0,0,0,.2),
        -5px 0px 7px 0px rgba(0,0,0,.2);
    transition: height .43s ease-out;
    width:20px
}
.two {
    background-color: #5CB85C;
    border-radius: 0px 0px 0px 10px;
    box-shadow: 0px 5px 7px 0px rgba(0,0,0,.2),
        -5px 0px 7px 0px rgba(0,0,0,.2);
}
.three {
    background-color: #D53400;
    border-radius: 0px 10px 0px 0px;
    box-shadow: 0px -5px 7px 0px rgba(0,0,0,.2),
        5px 0px 7px 0px rgba(0,0,0,.2);
    width:20px;
}
.four {
    background-color: #FFBF00;
    border-radius: 0px 0px 10px 0px;
    box-shadow: 0px 5px 7px 0px rgba(0,0,0,.2),
        5px 0px 7px 0px rgba(0,0,0,.2);
}

JavaScript

document.addEventListener("DOMConenteLoaded", init(), true);
var small = false;
function init() {
    document.querySelector("div.one").addEventListener("click", function() {
        if(!small) {
            this.style.height = "60px";
            small = true;
        } else {
            var divWrapper = document.querySelector(".div-wrapper");
            var height = parseFloat(divWrapper.offsetHeight) / 2;
            console.log(height);
            this.style.height = height+"px";
            small = false;
        }
    });
}