JSFiddle - React, Tailwind, and code Playground

HTML

<div class="text">bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
</div>
<div class="button">Show</div>

CSS

.text{
  height:100px;
  overflow:hidden;
}

JavaScript

$(function(){
    $(".button").click(function(){
        $box = $(".text");
        minimumHeight = 100;
        
        // get current height
        currentHeight = $box.innerHeight();

        // get height with auto applied
        autoHeight = $box.css('height', 'auto').innerHeight();
        
        // reset height and revert to original if current and auto are equal
        $box.css('height', currentHeight).animate({
            height: (currentHeight == autoHeight ? minimumHeight : autoHeight)
        })
    });
})