JSFiddle - React, Tailwind, and code Playground

HTML

<div id="status-message">Foobar</div>

<a href='#' id="set-message">Set long message</a>

CSS

#status-message {
    margin: 20px;
    background: #ccc;
}

JavaScript

// function to display status content by animating the height of the status message
function slideStatus(content){
    
    // reset styles
    $("#status-message")
        .css("overflow","visible")
        .css("height", "auto")
    
    // get current height
    var status_origheight = $("#status-message").height();
    console.log(status_origheight);

    // insert new content
    $("#status-message").html(content);

    // get new height
    var status_newheight = $("#status-message").height();
    console.log(status_newheight);
    
    // set the height to the orig value, hiding overflow content
    $("#status-message").height(status_origheight).css("overflow","hidden");

    // animate the div to the new height
    $("#status-message").animate({height:"+="+(status_newheight - status_origheight)+""}, 1000);

}

$('#set-message').click(function() {
    slideStatus($("#status-message").html() + " LOREM IPSUM DOLOR SIT AMET LOREM IPSUM DOLOR SIT AMET LOREM IPSUM DOLOR SIT AMET LOREM IPSUM DOLOR SIT AMET LOREM IPSUM DOLOR SIT AMET LOREM IPSUM DOLOR SIT AMET LOREM IPSUM DOLOR SIT AMET LOREM IPSUM DOLOR SIT AMET LOREM IPSUM DOLOR SIT AMET LOREM IPSUM DOLOR SIT AMET LOREM IPSUM DOLOR SIT AMET LOREM IPSUM DOLOR SIT AMET LOREM IPSUM DOLOR SIT AMET LOREM IPSUM DOLOR SIT AMET LOREM IPSUM DOLOR SIT AMET LOREM IPSUM DOLOR SIT AMET ");
    return false;
});