JSFiddle - React, Tailwind, and code Playground

HTML

<a href="javascript: void(0);">open</a>

<div id="control">
	<div id="description" class="description expand">lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit ametasdfasdfasdfasdfasdfasdfasdfasdf</div>
</div>

CSS

#control {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;

			background-color: rgba(0,0,0, 0.05);
		}

		.description {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			background-color: rgba(0,0,0, 0.2);
			color: rgb(255,255,255);
			padding: 0 10px;

			line-height: 25px;

			text-align: center;
		}

		#description {
            transition: height 0.5s ease;
        }
        
		#description.expand {
			overflow: hidden;
			text-overflow: initial;
			white-space: normal;            
		}

JavaScript

$(document).ready(function(){
        var $el = $('#description'), 
            height = $el.outerHeight() + 'px', //get height in expanded state
            i=0, //initialize toggle variable
            initheight = 25 + 'px'; //sets the initial height
        $el.removeClass('expand').css('height', initheight);
		$("a").on("click", function(){
            //toggles the expand class, then sets height to either the height in
            //expanded state or 25 px (i++%2) acts as a toggle expresssion
            //(returns 25 at first click, height at second, 25 at third and so on)
            $el.toggleClass('expand').css('height', (i++%2) ? initheight : height);
        });
	});