JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
    <div id="testme">How now mr brown cow</div>
</body>
</html>

CSS

#testme {
    height:100px;
    border:1px solid black;
    text-align:center;
    line-height:100px;
}

JavaScript

$('#testme').click(function() {
    var theArray = this.innerHTML.toLowerCase().split(" ");
    theArray.sort(function(a,b) {
        var sumA = 0;
        var sumB = 0;
        var i = 0;
        for (i = 0; i < sumA.length || i < sumB.length; i++) {
            sumA += i < a.length ? a.charCodeAt(i) - 96 : 0;
            sumB += i < b.length ? b.charCodeAt(i) - 96 : 0;
        }
        return sumA - sumB;
    });
    var myresult = theArray.join(" ");
    this.innerHTML = myresult;
});