JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<textarea cols="60" rows="5" name="submitted" class="form-textarea resizable textarea-processed" style="opacity: 1; height: 45px;">sss</textarea>

CSS

textarea {
    border: 1px solid #ddd;
    margin:0;
    resize: none;
}
.resizable-textarea {
    width: 95%;
}
.resizable-textarea .grippie {
    height: 9px;
    overflow: hidden;
    background: #eee url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAFCAMAAACD1meMAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAGUExURbu7u////3iwjPUAAAACdFJOU/8A5bcwSgAAABRJREFUeNpiYMADGHEDBhroAwgwAA9QADeT0qnSAAAAAElFTkSuQmCC") no-repeat center 2px;
    border: 1px solid #ddd;
    border-top-width: 0;
    cursor: s-resize;
    margin-top: -4px;
}
html.js .resizable-textarea textarea {
    margin-bottom: 0;
    width: 100%;
    display: block;
}

JavaScript

$(function () {
    $('textarea').each(function () {

        var textarea = $(this).addClass('textarea-processed'),
            staticOffset = null;

        $(this).wrap('<div class="resizable-textarea"><span></span></div>')
            .parent().append($('<div class="grippie"></div>').mousedown(startDrag));

        var grippie = $('div.grippie', $(this).parent())[0];
        grippie.style.marginRight = (grippie.offsetWidth - $(this)[0].offsetWidth) + 'px';

        function startDrag(e) {
            staticOffset = textarea.height() - e.pageY;
            textarea.css('opacity', 0.25);
            $(document).mousemove(performDrag).mouseup(endDrag);
            return false;
        }

        function performDrag(e) {
            textarea.height(Math.max(32, staticOffset + e.pageY) + 'px');
            return false;
        }

        function endDrag(e) {
            $(document).unbind("mousemove", performDrag).unbind("mouseup", endDrag);
            textarea.css('opacity', 1);
        }
    });
});