JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="taOneComp"></textarea>
<textarea id="taTwoComp"></textarea>
<button id="btnCompare">Compare</button><br>

<table>
  <tr>
    <th><span id="divColLeft"></span></th>
    <th><span id="divColRight"></span></th>
  </tr>
</table>

CSS

.missing{
color:Red;
}
.missmatch{
color:blue;
}
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

JavaScript

$(function () {

            $('#btnCompare').on('click', function () {
                compare();
                return false;
            });

            function compare() {
                $('#divColLeft').empty();
                $('#divColRight').empty();

                var textOne = $.trim($('#taOneComp').val());
                var textTwo = $.trim($('#taTwoComp').val());

                var TempArr1 = textOne.split(' ');
                var TempArr2 = textTwo.split(' ');
                var arr1 = [];
                for (var i = 0; i < TempArr1.length; i++) {
                    if (TempArr1[i] !== "" && TempArr1[i] !== null) {
                        arr1.push(TempArr1[i]);
                    }
                }
                

                var arr2 = [];
                for (var i = 0; i < TempArr2.length; i++) {
                    if (TempArr2[i] !== "" && TempArr2[i] !== null) {
                        arr2.push(TempArr2[i]);
                    }
                }

                var minArrLen = arr1.length < arr2.length ? arr1.length : arr2.length;


                for (var x = 0; x < minArrLen; x++) {
               
                    var maxCharLen = arr1[x].length > arr2[x].length ? arr1[x].length : arr2[x].length;
                    for (var y = 0; y < maxCharLen; y++) {
                    if(y == 3){
                    console.log(arr1[x].charAt(y),"x");
                    console.log(arr2[x].charAt(y),"y");
                    $('#divColLeft').append('<br>');
                    $('#divColRight').append('<br>');
                    }
                    
                    
                        if (arr1[x].charAt(y) == ' ') {
                        $('#divColLeft').append('<br>');
                    $('#divColRight').append('<br>');
                            $('#divColLeft').append('<span  class="missing">' + arr2[x].charAt(y) + '</span>');

                            $('#divColRight').append('<span...