JSFiddle - React, Tailwind, and code Playground

by bluey

HTML

<table  width="50%" border="2">
    <tr height="100px" id="1">
        <td>1</td>
        <td>1.1</td>
        <td>1.2</td>
    </tr>
    <tr id="2">
        <td>2</td>
        <td>2.1</td>
        <td>2.2</td>
    </tr>
</table>
<button>Click  Me!</button>

JavaScript

$("button").click(function(){
    $('#1').slideToggle({
        duration: 1500,
        step: function(){
            var $this = $(this);
            var fontSize = parseInt($this.css("font-size"), 10);
            
            while(!sameHeight(this) && fontSize > 0){
                $this.css("font-size", --fontSize);
            }
        }
    });
});

function sameHeight(el){
    var cssHeight = el.style.height;
    cssHeight = parseFloat(cssHeight.substring(0,cssHeight.length-2));
    var realHeight = $(el).innerHeight();
    
    console.log(realHeight + " " + cssHeight);  
    
    return isNaN(cssHeight) || realHeight - cssHeight < 2;
}