JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu-content">
  <div id="info">
    <h1>Content</h1>
    <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>
  </div>
</div> <br style="clear:both;" />
<input id="appendContent" type="button" value="Click to append" />

CSS

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

#info {
    position:relative;
    color: #F4F4F4;
    float:left;
    padding:15px 25px;
}

JavaScript

var content = '<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>';

$('#appendContent').click(function(e){
    
    var element = $('#info');
    var oldHeight = element.height();
    var oldWidth = element.width();
    element.append(content);
    
    element.css({'width':'auto','height':'auto', 'padding':'15px 25px'});
    var contentWidth = element.width();   
    var contentHeight = element.height();
    element.css({'width':oldWidth+'px','height':oldHeight+'px'});
    
    element.animate({
      'width':contentWidth+'px',
      'height':contentHeight+'px',
      'padding':'15px 25px'
    }, 500);
    
});