JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="mainBody container">
    <div class="largeBox">
        <div class="closePost closePostHide"><span class="glyphicon glyphicon-remove pull-right">
    </span>

        </div>
        <p>Small text</p>
         <h3>Some Text</h3>

    </div>
    <div class="smallBox">
        <div class="closePost closePostHide"><span class="glyphicon glyphicon-remove pull-right">
    </span>

        </div>
        <p>Small text</p>
         <h3>Some Text</h3>

    </div>
    <div class="longBox">
        <div class="closePost closePostHide"><span class="glyphicon glyphicon-remove pull-right">
    </span>

        </div>
        <p>Small text</p>
         <h4>Some Text</h4>

    </div>
    <div class="smallBox">
        <div class="closePost closePostHide"><span class="glyphicon glyphicon-remove pull-right">
    </span>

        </div>
        <p>Small text</p>
         <h3>Some Text</h3>

    </div>
    <div class="smallBox">
        <div class="closePost closePostHide"><span class="glyphicon glyphicon-remove pull-right">
    </span>

        </div>
        <p>Small text</p>
         <h3>Some Text</h3>

    </div>
    <div class="longBox">
        <div class="closePost closePostHide"><span class="glyphicon glyphicon-remove pull-right">
    </span>

        </div>
        <p>Small text</p>
         <h4>Some Text</h4>

    </div>
</div>

CSS

.mainBody {
    margin: 0 auto;
    width: 850px;
    height: 1080px;
}
.largeBox {
    float: left;
    display: inline-block;
    border: 3px solid black;
    height: auto;
    width: 40%;
    padding: 0 5px 5px 5px;
    text-align: left;
    cursor: pointer;
    margin: 0 0 0 0;
}
.smallBox {
    float: right;
    display: inline-block;
    border: 3px solid black;
    height: auto;
    width: 20%;
    padding: 0 1px 5px;
    text-align: left;
    cursor: pointer;
    margin: 0 0 0 0;
}
.longBox {
    border: 3px solid black;
    height: auto;
    width: 40%;
    display: inline-block;
    padding: 0 5px 0 5px;
    margin: 0 0 0 0;
    text-align: left;
    cursor: pointer;
}
.closePostHide {
    display: none;
}

JavaScript

var animationResetCache = [];

var saveValues = function (node) {
    animationResetCache.push({
        node: node,
        width: node.css('width'),
        height: node.css('height')
    });
};

var restoreValues = function (node) {
    for (var i = 0; i < animationResetCache.length; ++i) {
        var item = animationResetCache[i];
        if (item.node.is(node)) {
            return item;
        }
    }
};


var profilePostsClick = function () {
    $('.largeBox, .smallBox, .longBox').click(function (e) {
        var $this = $(this);
        
        if ($this.hasClass('open')) return;

        saveValues($this);

        $this.addClass('open').animate({
            width: '100%',
            height: '40%'
        }, 200);

        $this.find('.closePost').removeClass('closePostHide');
    });
    
    
    $('.closePost').click(function () {
        var $parent = $(this).parent('.largeBox, .smallBox, .longBox');

        if ($parent.hasClass('open')) {
            var cachedValues = restoreValues($parent);

            $parent.animate({
                width: cachedValues.width,
                height: cachedValues.height
            }, function () {
                $parent.removeClass('open');
            });
            
            $parent.find('.closePost').addClass('closePostHide');
        }
    });

};
$(document).ready(profilePostsClick);