JSFiddle - React, Tailwind, and code Playground

HTML

<input id="input1" type="text" value="abcdefghijklmnopqrstuvwxyz"></input>

CSS

input {
    font-family: 'Courier';
    font-size: 2em;
    display: block;
}

JavaScript

// $('input2')... something to make it stay in sync with input1?

var input = document.getElementsByTagName("input")[0];
var range = input.createTextRange();
input.value = range.getBoundingClientRect();
//input.scrollLeft = ;