JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <!--Row 1 -->
    <div class="tile" id="bio"> 1:1</div>
    <div class="tile"> 1:2</div>
    <div class="tile"> 1:3</div>
    <div class="tile">1:4</div>
    <!--Row 2 -->
    <div class="tile">2:1</div>
    <div class="tile">2:2</div>
    <div class="tile">2:3</div>
    <div class="tile" id="bio">2:4</div>
</div><!-- EO Container -->

CSS

#container{
    border:1px solid red;
    min-height:200px;
    width:400px;
    overflow:hidden;
    position:relative;
}



.tile{
    width: 90px;
    height: 90px;
    background-color: red;
    float:left;
    margin:5px;
    z-index:5;

}
.hidden{
    width: 0px;
    height: 0px;
    opacity: 0;
    position:relative;
    -webkit-transition:all 2300ms ease-in-out;
    -moz-transition:all 2300ms ease-in-out;
    -o-transition:all 2300ms ease-in-out;
    transition:all 2300ms ease-in-out;
}
#bio{
    background-color:#CCC;
}
.enlarged{
    min-height:90px;
    height:100%;
    width:100%;
    opacity:1;
    position:absolute;
    z-index:20;
    -webkit-transition:all 1300ms ease-in-out;
    -moz-transition:all 1300ms ease-in-out;
    -o-transition:all 1300ms ease-in-out;
    transition:all 1300ms ease-in-out;
}

JavaScript

$('#bio').on('click', function(){
    var t = $(this),
        speed = 900;
    
    if( t.is(':animated') ) return;
    
    if( !t.hasClass('full') ) {
        t.data('size', { width : t.width(), height : t.height() });
        
        t.siblings().fadeOut().stop(1, 1);
        t.animate({
            width : t.parent().innerWidth() - 10,
            height : t.parent().innerHeight() - 10
        }, speed, function(){ t.addClass('full'); });
    } else {
        t.animate({
            width : t.data('size').width,
            height : t.data('size').height
        }, speed, function(){
            t.removeClass('full')
            .siblings().fadeIn( speed );
        });
        
    }
});