JSFiddle - React, Tailwind, and code Playground

HTML

<div class="one" id="effect1">
       Auto height
    <br>
        Auto height
    <br>
        Auto height
    <br>
        Auto height
    <br>
        Auto height
    <br>
        Auto height
    <br>
        Auto height
    <br>
</div>
 
 <div class="one" id="effect2">
       numeric height
    <br>
       numeric height
    <br>
       numeric height
    <br>
       numeric height
    <br>
       numeric height
    <br>
       numeric height
    <br>
       numeric height
    <br>
</div>

CSS

.one{
    width:100px;
    height:50px;
    background:#ccc;
    overflow:hidden;
    float: left;
    margin-left:10px;
}
.two{
    width:100px;
    height:auto;
    background:#ccc;
    overflow:hidden;
    float: left;
    margin-left:10px;
}
.three{
    width:100px;
    height:200px;
    background:#ccc;
    overflow:hidden;
    float: left;
    margin-left:10px;
}
#effect1{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    }
#effect2{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    }

JavaScript

$("#effect1").click(function() {
    var el = $(this),
    curHeight = el.height(),
    autoHeight = el.css('height', 'auto').height();
    el.height(curHeight).animate({height: autoHeight}, 'fast');
});
$("#effect2").click(function() {
    $(this).removeClass("one");
    $(this).addClass("three");
});