JSFiddle - React, Tailwind, and code Playground

HTML

<input id="message" type="text" placeholder="It's your turn to type....!" required="required">

CSS

input {
display: block;
 margin: 20px;
 width: auto;
height: 60px;
line-height: 15em;
font-size: 50px;
color: #000000;
 outline:none;
}

JavaScript

function resizeInput() {
    $(this).attr('size', $(this).val().length);
}

$('input[type="text"]')
    // event handler
    .keyup(resizeInput)
    // resize on page load
    .each(resizeInput);