JSFiddle - React, Tailwind, and code Playground

HTML

<div class="text-block" contenteditable="true" spellcheck="false">Some Text SpellCheck</div>
<textarea spellcheck="false" class="text-block">Some Text SpellCheck</textarea>

CSS

.text-block {
    resize: none;
    font: normal 40px/1.2 arial;
    border: none;
    line-height: 1;
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    min-width: 30px;
    overflow: visible;
    display: inline-block;
    outline: 1px solid grey;
    margin-top: 10px;
    padding: 2px;
}

textarea {
    padding: 0!important;
    margin: 0;;
    overflow: hidden!important;
    vertical-align: top;
    text-indent: 0;
}

div {
   position: absolute;
   visibility: hidden;
   color: #fff; /* background color */
    opacity: 0;
   z-index: -100;
}
div span 
  width: 1px;
  display: inline-block;
  overflow: hidden;
}

JavaScript

var textarea = $('textarea'),
    textBlock = $('div.text-block'),
    interval, value, freq = 10,
    doTextAreaAdjust = function(){
       textarea.css({
          height: textBlock.outerHeight(),
          width: textBlock.outerWidth()
       });
    };
doTextAreaAdjust();
textarea
.focus(function(){
    interval = window.setInterval(
        function() {
          value = textarea.val().replace(/(\r\n|\n|\r)/gm, '[rnnr]');
          value = value.replace(/</gm, '||'); // break html tags
          value = value.replace(/\[rnnr\]/gm, '<br>');
          value = value + '|'; // or <span>|</span> for better pixel perfect
          textBlock.html(value);
          doTextAreaAdjust();
        }, freq
    );console.log(interval);
})
.blur(function(){
    window.clearInterval(interval);
});