JSFiddle - React, Tailwind, and code Playground

by Ihab Abdel-Rahim

HTML

<textarea id="title" name="title" class="autosize" placeholder="new post title" cols="42" rows="1">Post title</textarea>

CSS

.autosize {
overflow: hidden;
margin: 0;
padding: 0;
min-height: 26px;
font-family: JF-Flat medium, Tahoma, Arial;
font-size: 24px;
margin: 15px 15px 0 15px;
resize: none;
}

JavaScript

<!-- JS autosize textarea height to input-->
    $(document).ready(function () {
        $(".autosize").on("keyup", function () {
            var h = $(this).height();
            $(this).css("height", "0px");
            var sh = $(this).prop("scrollHeight");
            var minh = $(this).css("min-height").replace("px", "");
            $(this).css("height", Math.max(sh, minh) + "px");
        });
    });
<!-- JS prevent textarea ENTER new line-->
    $('textarea').keypress(function (event) {
        if (event.keyCode == 13) {
            event.preventDefault();
        }
    });