JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <textarea cols="20" rows="5" id="myTextarea"></textarea>
</div>
<div id="pnlPreview"></div>
<div>
  <button type="button" onclick="ApplyLineBreaks('myTextarea');">Apply Line Breaks</button>
</div>

CSS

textarea {
  overflow-y: scroll;
}

JavaScript

function ApplyLineBreaks(strTextAreaId) {

  // Get txtarea
  var oTextarea = document.getElementById(strTextAreaId);

  // Disable textarea wrap
  oTextarea.setAttribute("wrap", "off");

  // Split the characters into an array
  var aWords = oTextarea.value.split(' ');

  // Empty the textarea
  oTextarea.value = "";

  // Get textarea scrollwidth
  var nEmptyWidth = oTextarea.scrollWidth;

  // Start looping over the words
  for (var i = 0; i < aWords.length; i++) {

    var curWord = aWords[i] + ' ';

    // Add character to textarea
    oTextarea.value += curWord;

    if (oTextarea.scrollWidth > nEmptyWidth) {
      let oldVal = oTextarea.value;
      let newVal = oldVal.substring(0, (oldVal.length - (curWord.length + 1))) + "\n" + curWord;
      oTextarea.value = newVal;
    }
  }
  oTextarea.setAttribute("wrap", "");

  document.getElementById("pnlPreview").innerHTML = oTextarea.value.replace(new RegExp("\\n", "g"), "<br />");

}


var startTime, endTime;

function start() {
  startTime = new Date();
};

function end() {
  endTime = new Date();
  var timeDiff = endTime - startTime; //in ms
  // strip the ms
  //  timeDiff /= 1000;

  // get seconds 
  var seconds = Math.round(timeDiff);
  console.log(seconds + " ms");
}