JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<textarea id="textarea1" style="resize:none;"></textarea><span id="stat"></span>
<div id="nodisplay"></div>

CSS

#nodisplay{
    border:1px solid;
    overflow:hidden;
    word-break:break-word;
}

#textarea1{
    resize:none;
}

JavaScript

$(document).ready(function(){
    $("#nodisplay").css("height",$("#textarea1")[0].scrollHeight);
    $("#nodisplay").css("width",$("#textarea1")[0].scrollWidth);
});
$("#textarea1").keydown(function(){
$("#textarea1").css("height",$("#textarea1")[0].scrollHeight);
$("#stat").html($("#textarea1")[0].scrollHeight+" >> "+$("#textarea1")[0].innerText);
$("#nodisplay").text($("#textarea1").val());
$("#nodisplay").css("height",$("#textarea1")[0].scrollHeight);
$("#nodisplay").css("width",$("#textarea1")[0].scrollWidth);
});