JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/cowboy/jquery-resize/v1.1/jquery.ba-resize.min.js"></script>
<body>
    <div class="wrapper">
        <div class="square">
            <div class="inside1">
                <div class="inside2"></div>
            </div>
        </div>
       
    </div>
</body>

CSS

.wrapper {
    width:70%;
    position: relative;
    margin: 0 auto;
    background:#ccc;
    height:auto;
}

.square {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    background-color: #7ad;
    -webkit-transform-origin: center top;
    -moz-transform-origin: center top;
    -o-transform-origin: center top;
    transform-origin: center top;
}
.inside1 {
    width: 200px;
    background:#609;
    height:200px;
}
.inside2 {
    width: 100px;
    background:#66F;
    height:100px;
}

JavaScript

$(window).load(function () {
    console.log( "window load" );
				$.fn.animateHeight = function (container) {
				    var thisHeight = $(container).map(function (i, e) {
				        return $(e).height();
				    }).get();
				
				    return this.animate({
				        height: thisHeight
				    });
				};

    // When the browser is resized
    $(window).resize(function () {
        console.log( "resize" );
        $(".square").animateHeight(".wrapper")
    });

    // When the page first loads
    $(document).ready(function () {
        console.log( "dom ready" );        
        $(".square").animateHeight(".wrapper")
    });

});