JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.nealfletcher.co.uk/js/isotope-center.js"></script>
<script src="http://www.nealfletcher.co.uk/js/jquery.isotope.min.js"></script>
<script src="http://www.nealfletcher.co.uk/js/jquery.imagesloaded.js"></script>
<div id="journal-grid">
    <div class="journal-block big-news">
        <div class="journal-read-wrap">
            <div class="journal-read-more">Read More</div>
            <div class="journal-read-less">Close</div>
        </div>
        <div class="journal-text-wrap">
            <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>
            <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="journal-block big-news">
        <div class="journal-read-wrap">
            <div class="journal-read-more">Read...

CSS

#journal-grid {
    position: relative;
    top: 40px;
    margin: 0 auto;
    padding-bottom: 120px;
}
.journal-block {
    height: 470px;
    margin-left: 25px;
    margin-right: 25px;
    margin-bottom: 50px;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    overflow: hidden;
    transition: height 400ms;
}
.journal-block-long {
    margin-left: 25px;
    margin-right: 25px;
    margin-bottom: 50px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}
.big-news {
    width: 180px;
}
.journal-text-wrap {
    position: relative;
    width: 100%;
    font-family:"Times New Roman", Times, serif;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0.5px;
    color: #818285;
}
.journal-read-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3em;
    background-color: #ffffff;
    z-index: 9999;
}
.journal-read-more, .journal-read-less {
    position: absolute;
    bottom: 0;
    right: 0;
    padding-bottom: 21px;
    padding-left: 90px;
    cursor: pointer;
    font-size: 12px;
    letter-spacing: 1px;
    text-decoration: underline;
    z-index: 9999;
}
.journal-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:...

JavaScript

$(document).ready(function () {

    var $container = $('#journal-grid');

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

    $('.journal-read-more').click(function () {
        var $this = $(this),
            $parent = $this.parent().parent('.journal-block');
        $this.hide();

        $this.siblings('.journal-read-less').fadeIn('slow');
        $parent.css('height', 'auto');
        var newHeight = $parent.height();
        newHeight = (Math.floor((newHeight + 49) / 520) + 1) * 520 - 48;
        $parent.css('height', newHeight)
            .removeClass('journal-block')
            .addClass('journal-block-long');
        //$('#main-grid').isotope('reLayout');
        $container.isotope('reLayout');
    });

    $('.journal-read-less').click(function () {
        var $this = $(this);
        $this.hide();

        $this.siblings('.journal-read-more').fadeIn('slow');
        $this.parent().parent('.journal-block-long')
            .css('height', 470)
            .removeClass('grid-block-long')
            .addClass('journal-block');
        $('#journal-grid').isotope('reLayout');
        $container.isotope();
    });
});