JSFiddle - React, Tailwind, and code Playground

by Matthew Day

HTML

<span><p>Hello, my name is </p></span>

<span> <input id="txt" placeholder="name" class="form" type="text" value="blah" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"></span>
   

<span><p>. I am </p></span>
    
<span><input type="text" value="heythere!" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';" id="input" class="form" placeholder="age"
    ></span>
    
    <span><p> years old.</p></span>

CSS

.form {
    border: 1px solid black;
    text-align: center;
    outline: none;
    min-width:4px;
}

span {
    display: inline-block;
}

p {
    font-family: arial;
}

JavaScript

$('input').css('width',((input.getAttribute('placeholder').length + 1) * 8) + 'px');