JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu-content">
    <div id="info"></div>
</div> <br style="clear:both;" />
<input id="loadContent" type="button" value="Click to load" />

CSS

#menu-content {
    background:rgba(0,0,0,0.2);
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    margin:0px 25px 25px 25px;
    opacity:0;
    position:relative;
    color: #F4F4F4;
    float: left;
}

#info {
    position:relative;
    color: #F4F4F4;
    float:left;
    opacity:0;
    width:0; height:0; padding:0;
}

JavaScript

$('#loadContent').click(function(e){
    
    var $mci = $('#info');
    
    $mci.html('<h1>HEY YOU</h1><small>Yeah you!</small><br /><p>I see you in that kangaroo suit, bouncing around like Mohammed Ali on PCP, workin the ring, smellin things, gettin ready to drop bombs.</p><br /><h2>What?</h2><p>I see you in that kangaroo suit, bouncing around like Mohammed Ali on PCP, workin the ring, smellin things, gettin ready to drop bombs.</p>');
    
    $mci.css({'width':'auto','height':'auto', 'padding':'15px 25px'});
    var contentWidth = $mci.width();   
    var contentHeight = $mci.height();
    $mci.css({'width':'1px','height':'0','padding':'0'});
    
    $('#menu-content').css('opacity','1');
    $mci.animate({
        'opacity':1,
        'width':contentWidth+'px',
        'height':contentHeight+'px',
        'padding':'15px 25px'}, 500);
    
});