JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

body {
    align-items: center;
    display: flex;
    height: 100vh;
    justify-content: center;
}
.div-wrapper {
    display: flex;
    flex-flow: column wrap;
    height: 400px;
    width: 400px;
}
.box {
    height: calc(100% / 2);
    transition: height .43s ease-out;
    width: calc(100% / 2);
}
.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);
}
.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);
}
.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;
var boxOneResized = false;
var boxTwoResized = false;
var boxThreeResized = false;
var boxFourResized = false;
function init() {
    var boxOne = document.querySelector(".box.one");
    var boxTwo = document.querySelector(".box.two");
    var boxThree = document.querySelector(".box.three");
    var boxFour = document.querySelector(".box.four");
    boxOne.addEventListener("click", resize, true);
    boxTwo.addEventListener("click", resize, true);
    boxThree.addEventListener("click", resize, true);
    boxFour.addEventListener("click", resize, true);    
    function resize() {
        if(this.id === "one") {
            if(!boxOneResized) {
                this.style.height = "60px";
                boxOneResized = true;
            } else {
                boxOneResized = resizeBack(this);
            }
        } else if(this.id === "two") {
            if(!boxTwoResized) {
                this.style.height = "60px";
                boxTwoResized = true;
            } else {
                boxTwoResized = resizeBack(this);
            }
        } else if(this.id === "three") {
            if(!boxThreeResized) {
                this.style.height = "60px";
                boxThreeResized = true;
            } else {
                boxThreeResized = resizeBack(this);
            }
        } else if(this.id === "four") {
            if(!boxFourResized) {
                this.style.height = "60px";
                boxFourResized = true;
            } else {
                boxFourResized = resizeBack(this);
            }
        }
    };
    function resizeBack(element) {
        var divWrapper = document.querySelector(".div-wrapper");
        var height = parseFloat(divWrapper.offsetHeight) / 2;
        element.style.height = height+"px";
        return false;
    }
}