JSFiddle - React, Tailwind, and code Playground

HTML

<div class="list-view">
    <div class="view moo">
        <p class="visible">Some text</p>
        <p class="visible">More text</p>
        <p class="hidden">Oh no, I am hidden! :(</p>
    </div>
    
    <div class="view moo">
        <p class="visible">Some text</p>
        <p class="visible">Some text, of which there is rather a lot I am afraid. This may move on to several lines in the div, making this taller than that other one up there.</p>
        <p class="hidden">So ronery...</p>
    </div>
</div>

CSS

.view
{
    width: 200px;
    border: 1px solid black;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #EFFDFF
}

.view p {
    margin-bottom: 10px;
}

JavaScript

var items = $$('div.moo');
    items.set('morph', {
            duration: 400
    });

    var visible;
    var hidden;
var newDiv = items[0].clone();
items.each(function(i){ funkify(i)});

funkify(newDiv.inject($$('.list-view')[0]));

function funkify(i)
    {
        var totalVHeight = 0;
        var totalHeight = i.getComputedSize().height;
        visible = i.getElements('.visible');
        visible.each(function(e)
        {
            totalVHeight += e.getComputedSize({styles: ['margin','padding','border']}).totalHeight;
        });
        
        i.setStyle('height', totalVHeight);
        i.addEvents(
        {
            mouseenter: function()
            {
                this.morph(
                {
                    'height': totalHeight,
                    'cursor': 'pointer',
                    'background-color': '#F9B11E',
                    'color': 'white'
                })
            },

            mouseleave: function()
            {
                this.morph(
                {
                    'height': totalVHeight,
                    'background-color': '#EFFDFF',
                    'color': 'black'
                })
            },

            click: function()
            {
                var href = this.getElement('.viewlink').get('href');
                window.location = href;
            }
        });
    }