JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div">
<input id="street_1"/>
<span id="street1span"></span>
<span id="street1span_fake"></span>
</div>

CSS

#div {
  position: relative;
}

#street_1 {
  color: transparent;
  font-family: "Times New Roman";
  caret-color: black; 
  z-index: 1;
  font-size: 1em;
  width: 100px;
  outline: none;
}

#street1span {
  display: inline-block;
  font-size: 1em;
  font-family: "Times New Roman";
  white-space: nowrap;
  overflow-x: hidden;
  width: 100px;
  position: absolute;
  top: 2px;
  left: 1px;
  padding: 1px;
  z-index: 2;
  pointer-events: none;
}
#street1span_fake {
  opacity: 0;
  display: inline-block;
  width: auto;
}

JavaScript

$('#street_1').on("input" ,function() {
    var span = $("#street1span"),
        fakeSpan = $("#street1span_fake"),
        input = $("#street_1");
        
    span.html(input.val().substring(0, 10) + '<span style="color: red;">' + input.val().substring(10) + '</span>');
    fakeSpan.html(span.html());
});
$("#street_1").bind("keyup click focus", function() {
    var span = $("#street1span"),
        fakeSpan = $("#street1span_fake");
        
    span.scrollLeft(fakeSpan.width() * getCursorPosition($(this)) / fakeSpan.text().length);
});

function getCursorPosition(element) {
    var el = $(element).get(0);
    var pos = 0;
    if ('selectionStart' in el) {
        pos = el.selectionStart;
    } else if ('selection' in document) {
        el.focus();
        var Sel = document.selection.createRange();
        var SelLength = document.selection.createRange().text.length;
        Sel.moveStart('character', -el.value.length);
        pos = Sel.text.length - SelLength;
    }
    return pos;
}