JSFiddle - React, Tailwind, and code Playground

HTML

<div class='mytext'>
  <ul>
      <li id='label'>ADDRESS&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</li>
      <li>&nbsp;</li>
     
  </ul>
  <textarea onfocus='mytext.update(this)' onscroll='mytext.scroll(this)'></textarea>
</div>

CSS

div.mytext {
  position:relative;
  overflow:hidden;
  width:400px;
  height:200px;
}
div.mytext > ul {
  position:absolute;
  top:5px;
  left:2px;
  font-weight:bold;
  color:#f00;
  list-style:none;
  width:100%;
  padding:0;
  margin:0;
  z-index:0;
}

div.mytext >ul> li {
  border-bottom:1px solid #000;
  width:100%;
  height:27px;
}

div.mytext > ul,
div.mytext > textarea {
  font-size:12px;
  line-height:2.5em;
  font-family:courier;
  height:100%;
  width:100%;
  overflow:hidden;
  max-width:100%;
  max-height:100%;
  -moz-box-sizing: border-box;
   box-sizing: border-box;
}

div.mytext > textarea {
  position:relative;
  background:transparent;
    border: none;
}

JavaScript

window.mytext = {
  update:
    function update(area) {
      if (!area.value.match(/^[ ]{5}/)) {
        area.value = '                ' + area.value.replace(/^\s+/,"");
      }
    //    alert(area.selectionStart);
      // Trying to set the cursorposition
      if (area.selectionStart < 40) {
          
        area.selectionStart = 50;
          //alert(area.selectionStart);
      }
    },
  scroll:
    function scroll(area) {
      area.parentElement.firstElementChild.scrollTop = area.scrollTop;
    }
}