<div style="width:200px;"> <!--  Just to not have a long textarea-->
  <div class="text-area-container">
    <div></div>
    <textarea onInput="this.previousElementSibling.innerText = this.value + String.fromCharCode(10)"></textarea>
  </div>
</div>

<br><br>
Loaded text:
<div style="width:200px;"> <!--  Just to not have a long textarea-->
  <div class="text-area-container">
    <!-- When loading text \n must be <br> -->
    <!-- and there must be a trailing <br> -->
    <div>FOoooo barrrrrr<br>1<br>2<br>3<br></div>
    <textarea onInput="this.previousElementSibling.innerText = this.value + String.fromCharCode(10)">FOoooo barrrrrr
1
2
3</textarea>
  </div>
</div>

.text-area-container {
  display: flex;
  align-items: stretch;
}
.text-area-container > textarea {
  /* Same style as as the div --> */
  border: 1px solid #c2cad8;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  /* <-- Same style as the div */
  
  margin: 0;
  margin-left: -100%;
  width: 100%;
  overflow: hidden;
  height: auto;
  /*opacity: 0.5;*/ /* UNCOMMENT FOR DEBUG */
}
.text-area-container > div {
  /* Same style as as the textarea --> */
  border: 1px solid #c2cad8;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  width: 100%;
  margin: 0;
  /* <-- Same style as the textarea */
  
  word-wrap: break-word;
  visibility: hidden;  /* COMMENT FOR DEBUG */
  /*color: red;*/  /* UNCOMMENT FOR DEBUG */
}