JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <input id="resizable-input" type="text" onkeypress="resizeBox()"/>
</div>

JavaScript

var prevLen = 20;

var window.resizeBox = function() {
	var elem = document.getElementById("resizable-input");
  if(elem.value && elem.value.length > 25) {
  		prevLen += 10;
  		elem.style.width = prevLen + "px";
      
  }
};

function initializeBox() {
	var elem = document.getElementById("resizable-input");
  elem.style.width = prevLen + "px";
}
initializeBox();