JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#div {
  position: relative;
}

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

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

JavaScript

$('#street_1').on("input" ,function() {
              document.getElementById('street1span').innerHTML = document.getElementById('street_1').value.substring(0, 10) + '<span style="color: red;">' + document.getElementById('street_1').value.substring(10) + '</span>';

        });