JSFiddle - React, Tailwind, and code Playground

HTML

<input id="beLowerCase" type="Text" value="______________________________232332" />

JavaScript

document.querySelector("input").onclick = function () {
console.log(this.value.length )
  if((this.value.length + 1)*8 >= this.clientWidth){
    this.style.textAlign = "right";
    this.setSelectionRange(this.value.length,this.value.length );
  }
}