JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<div id="in" style="width:150px;"><center>Once upon a time, there lived a squirrel who lived in the middle of the forest.</center><div>
    
<div id="out" style="width:150px;"><div>

JavaScript

$.fn.textWidth = function(){
  var html_org = $(this).html();
  var html_calc = '<span>' + html_org + '</span>';
  $(this).html(html_calc);
  var width = $(this).find('span:first').width();
  $(this).html(html_org);
  return width;
};

var getCharWidth = function(c) {
     if (c == " ") return 4;
     $('body').append('<div id="test">'+c+'</div>');
     rwidth = $("#test").textWidth();
     $('#test').remove();
     return rwidth;
}



var text = $('center').text();
var width = $('#in').width();

var words = text.split(" ");
var charWidth = new Object();
for (var i = 0, n = words.length; i < n; i++) {
    charWidth[words[i]] = getCharWidth(words[i]);
}

// build first span
leftindex = words.indexOf('who') - 1;
rightindex = leftindex + 2;
linewidth = charWidth['who'];
leftwidth = 0;
rightwidth = 0;
linetext = "who";
while (leftindex >= 0 && rightindex < words.length) {
    var temp = linetext;
    if (rightwidth > leftwidth) {
      temp = words[leftindex] + ' ' + temp;
      linewidth += charWidth[words[leftindex]] + 4;
      leftwidth += charWidth[words[leftindex]] + 4;
      leftindex -= 1;
    } else {
      temp = temp + ' ' + words[rightindex];
      linewidth += charWidth[words[rightindex]] + 4;
      rightwidth += charWidth[words[rightindex]] + 4;
      rightindex += 1;
    }
    if (linewidth > width) {
        break;
    }
    linetext = temp;
}
if (leftwidth > rightwidth) {
    for (var j = 0; j < (leftwidth-rightwidth); j+=4) {
       linetext = linetext + "&nbsp"; 
    }
} else if (rightwidth < leftwidth){
    for (var j = 0; j < (rightwidth-leftwidth); j+=4) {
       linetext = "&nbsp" + linetext; 
    }    
}
  

text = text.replace(linetext, "|");
var therest = text.split("|");

var backwardsWrap = function(btext) {
if (btext == "") return "";
var result = backwardsWrapHelper(btext);
return  backwardsWrap(result['rest']) + result['wrapped'];   
}
var backwardsWrapHelper = function (btext) {
    var blinewidth = 0;
    bwords = btext.split(" ");
   ...