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 profilePostsClick = function () {
    $('.largeBox, .smallBox, .longBox').click(function () {
        $(this).animate({
            width: '100%',
            height: '40%'
        }, 200);
        $('.closePost', this).removeClass('closePostHide');
    });
};
$(document).ready(profilePostsClick);