JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.nealfletcher.co.uk/js/jquery.ba-hashchange.js"></script>
<script src="http://www.nealfletcher.co.uk/js/jquery.isotope.min.js"></script>
<script src="http://www.nealfletcher.co.uk/js/isotope-center.js"></script>
<script src="http://www.nealfletcher.co.uk/js/jquery.imagesloaded.js"></script>
<div id="main-grid">
    <div class="grid-block">
        <div class="read-more">Read More</div>
        <div class="read-less">Read Less</div>
        <div class="grid-block-text">
            <p>this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text</p>
            <p>this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text</p>
        </div>
    </div>
    <div class="grid-block">
        <div class="read-more">Read More</div>
        <div class="read-less">Read Less</div>
        <div class="grid-block-text">
            <p>this is text</p>
        </div>
    </div>
    <div class="grid-block">
        <div class="read-more">Read More</div>
        <div class="read-less">Read Less</div>
        <div class="grid-block-text">
            <p>this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text</p>
            <p>this is text this is text this is text this is text this is text this is text this is...

CSS

#main-grid {
    top: 70px;
    width: auto;
    position: absolute;
    margin: 0 auto;
    padding-bottom: 70px;
}
.grid-block {
    width: 200px;
    height: 300px;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 30px;
    text-align: left;
    background-color: pink;
}
.grid-block-long {
    width: 200px;
    /*height: 630px;*/
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 30px;
    text-align: left;
    background-color: orange;
}
.grid-block-text {
    padding: 5px;
}
.read-more, .read-less {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 5px;
    cursor: pointer;
}
.read-less {
    display: none;
}
/*
ISOTOPE CONTENT ------------------
*/
 .isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    z-index: 1;
}
.isotope, .isotope .isotope-item {
    /* change duration value to whatever you like */
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -ms-transition-property: -ms-transform, opacity;
    -o-transition-property: -o-transform, opacity;
    transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
 .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -ms-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}

JavaScript

$(document).ready(function () {
    var $container = $('#main-grid');

    $container.imagesLoaded(function () {
        $container.isotope({
            itemSelector: '.grid-block, .grid-block-long',
            animationEngine: 'best-available',
            masonry: {
                columnWidth: 2
            }
        });
    });

    $('.grid-block-text p').hide().filter(":first-child").show();

    $('.read-more').click(function () {
        var $this = $(this),
            $parent = $this.parent('.grid-block');
        $this.hide();
        $this.nextAll('.grid-block-text')
            .children('p').fadeIn('slow');
        $this.siblings('.read-less').fadeIn('slow');
        var $copy = $parent.clone().appendTo('body').hide().css('height','auto');
        var newHeight = $copy.height();
        $copy.remove();
        newHeight = (Math.floor((newHeight+29)/330)+1)*330-30;
        $parent
            .css('height',newHeight)
            .removeClass('grid-block')
            .addClass('grid-block-long');
        //$('#main-grid').isotope('reLayout');
        $container.isotope('reLayout');
    });

    $('.read-less').click(function () {
        var $this = $(this);
        $this.hide();
        $this.nextAll('.grid-block-text')
            .children("p:not(:first-child)").fadeOut('fast');
        $this.siblings('.read-more').fadeIn('slow');
        $this.parent('.grid-block-long')
            .css('height',300)
            .removeClass('grid-block-long')
            .addClass('grid-block');
        $('#main-grid').isotope('reLayout');
        $container.isotope();
    });
});