JSFiddle - React, Tailwind, and code Playground

by pradeep

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div  class="ui-widget-content">
    <table id="resizable">
        <tr>
            <th>I want to resize this font-size, directly proportionally while resizing this table</th>
        </tr>
    </table>
    
</div>

CSS

#resizable { width: 150px; height: 150px; padding: 0.5em; }

JavaScript

$(function() {
      $( "#resizable" ).resizable();
      old_width = $( "#resizable" ).width();
      old_height = $( "#resizable" ).height();
      
      $( "#resizable" ).resize(function(){
           current_widht = $( "#resizable" ).width();
           current_height = $( "#resizable" ).height();
          // this shoud be de index for font decrease or increase
          r = (current_widht/old_width) * (current_height/old_height); 
       if( r >= 1)
       {
           r = r*2;
          $( "#resizable" ).css('font-size', 11 + r);
       }
       else
       {
           r = r*2;
          $( "#resizable" ).css('font-size', 11 - r);
       }
       });
   
  });