JSFiddle - React, Tailwind, and code Playground

HTML

<div class="clickable spot" id="spot1">
    <div class="white"></div>
    <article class="purple" id="story1">
        <div>
            <p class="date">posted 20 Jan 14</p>
            <p class="region">Bangladesh</p>
            <p class="title">Story Title</p>
            <p>Egestas eros ac risus faucibusr</p> <a href="#" class="close_button">CLOSE</a> 
        </div>
    </article>
</div>

CSS

div.clickable {
    transition-property: height;
    transition-duration: 2s;
    padding: 2px;
    overflow: hidden;
    border: 1px dotted blue;
    background-color: purple;
    color: white;
    min-height:40px;
    max-height:400px;
}
.spot {
    height: 40px;
}
.grown {
    height: 200px;
}
.close_button {
    text-decoration: none;
    color: white;
    font-weight: bold;
    padding: 2px 5px;
    border: 1px solid #c2c2c2;
}

JavaScript

$(function () {
    $(document).on('click', '.clickable', function () {
        $(this).addClass('grown').removeClass('spot');
    }).on('click', '.close_button', function (e) {
        e.stopPropagation();
        $(this).closest('.clickable').removeClass('grown').addClass('spot');
    });
});