JSFiddle - React, Tailwind, and code Playground

HTML

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

<span><input type="text" id="input" class="form" placeholder="name"></span>

<span><p>. I am </p></span>
    
<span><input type="text" id="input" class="form" placeholder="age"></span>
    
    <span><p> years old.</p></span>
    <span id='testdiv'></span>

CSS

.form {
    border: thin solid rgba(0,0,0,0.05);
    text-align: center;
    outline: none;
}

span {
    display: inline-block;
}

p {
    font-family: arial;
}

input{ min-width:30px; width:30px; text-align:left !important;}
#testdiv{ display:none;}

JavaScript

var testdiv = $("#testdiv");
$("input").keydown( function(){
    var ME = $(this);
    //Manual Way
    //var px = 6.5;
    //var txtlength = ME.val().length;
    //$(this).css({width: txtlength * px });
    
   testdiv.html( ME.val() + "--"); //-- for padding
   var txtlength = testdiv.width();
   $(this).css({width: txtlength  }); 
});