JSFiddle - React, Tailwind, and code Playground

HTML

<span id="emailme">Email me</span>
<form id="myForm">
    <input id="more" name="more" type="button" value="More space?" />
    <textarea id="comment" name="comment" rows="3">
    
    </textarea>
</form>

JavaScript

(function(){
    var BIG = 17,
        SMALL = 3,
        currentSize = SMALL,
        changeSize = function(rows) {
            var $more = $("#more"),
                thetxt = $more.val(),
                $box = $("#comment"),
                currentRows = $box.prop("rows"),
                boxRowHeight = $box.height()/currentRows,
                newHeight = rows * boxRowHeight;
            
            if (rows === currentRows) return;       
            
            return $box.animate({'height': newHeight }, 500 , "swing", function(){
                $more.val((currentRows > rows) ? "more space?" : "less space");
                $box.prop("rows", rows);
                currentSize = rows;
            }).promise();
        },
        setNewSize = function(event) {
            var $area = $(event.target);
            if ($area.val().length > 50 && currentSize === SMALL) {
                changeSize(BIG);
                currentSize = BIG ;
            } 
        };


            
    $("#comment").bind("keyup", setNewSize);
    
    $("#more").click(function(){
        if (currentSize === BIG) {
            $.when(changeSize(SMALL)).then(function(){

            });
        }else{
            $.when(changeSize(BIG)).then(function(){
                
            });            
        }

    });            
})();