JSFiddle - React, Tailwind, and code Playground

HTML

<body onload="auto_grow()">

<div class="wrapper">
    <label>Form Field</label>
</div>
<div class="wrapper">
<textarea name="whatWillBeSentToServer" readonly="readonly">
Multiple lines
Another Line
    Yet another line (this one with indentation)
    MORE LINES!!!!
</textarea>
</div>

<script>
function auto_grow(){
  var ts = document.getElementsByTagName('textarea')
  for (var i in Object.keys(ts)){
    ts[i].style.height = "5px";
    ts[i].style.height = (ts[i].scrollHeight)+"px";
  }
}
</script>

</body>

CSS

textarea[readonly] {
    width: 100%;
    border: 0;
    resize: none;
    overflow: hidden;
}
.wrapper {
    display: inline-block;
}