JSFiddle - React, Tailwind, and code Playground

HTML

<script src="&quot;https://code.jquery.com/jquery-3.0.0.min.js"></script>
<div class="resizing-input">



<input id="txt" type="text" value="suraj mahajan" onkeypress="this.style.width = ((this.value.length ) * 6) + 'px';">

<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

</div>

CSS

.resizing-input input, .resizing-input span {
    font-size: 12px;
    font-family: Sans-serif;
    white-space: pre;
    padding: 5px;
}
input 
{
  background-color:transparent;
  border:0px;
  outline:none;
}

JavaScript

$(document).ready(function(){
$('body').find('input').each(function(){
$(this).css('width',($(this).val().length)*6 + 'px');

});
});