JSFiddle - React, Tailwind, and code Playground
HTML
<textarea name="words" id="words" rows="1" style="overflow:hidden"></textarea>
CSS
#words {
width:150px;
font-size:17px;
}
JavaScript
$("textarea").mousemove(function(e) {
var $this = $(this);
var myPos = $(this).offset();
myPos.bottom = $(this).offset().top + $(this).outerHeight();
myPos.right = $(this).offset().left + $(this).outerWidth();
if (myPos.bottom > e.pageY && e.pageY > myPos.bottom - 16 && myPos.right > e.pageX && e.pageX > myPos.right - 16) {
$(this).css({ cursor: "nw-resize" });
}
else {
$(this).css({ cursor: "" });
}
})
// the following simple make the textbox "Auto-Expand" as it is typed in
.keydown(function(e) {
// the following will help the text expand as typing takes place
while($(this).outerHeight() < this.scrollHeight) {
$(this).height($(this).height()+1);
};
while($(this).outerHeight() > this.scrollHeight) {
$(this).height($(this).height()-1);
};
});