JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
<div class="text">Demo Text</div>
</div>

<div class="button increasefont">increaseFont</div>
<div class="button increasewidth">increaseWidth</div>
<div class="button bothtogether">bothTogether</div>
<div class="button close">reset</div>

CSS

.block{height:200px; width:500px; background:#eee; cursor:pointer;}
.text{width:100%; text-align:center; font-size:10px;}
.button{padding:5px; cursor:pointer;}

JavaScript

$.fn.textWidth = function(){
  var html_org = $(this).html();
  var html_calc = '<span>' + html_org + '</span>';
  $(this).html(html_calc);
  var width = $(this).find('span:first').width();
  $(this).html(html_org);
  return width;
};

$('.increasefont').live('click',function () {
        $('.text').animate({
            'font-size':'60px' 
        },"slow");
});

$('.increasewidth').live('click',function () {
        $('.text').animate({
            'width':$('.text').textWidth()
        },"slow");
});

$('.bothtogether').live('click',function () {
        $('.text').animate({
            'font-size':'60px', 
            'width':$('.text').textWidth()
        },"slow");
});

$('.close').live('click',function () {
    $('.text').animate({'width':'100%', 'font-size':'10px'},"slow");
});