JSFiddle - React, Tailwind, and code Playground

HTML

<table id="string-compare">
	<tr>
		<td id="tdStringA">
			<code>
			<span>1234567890</span><br />
			<span>0123456789</span><br />
			<span><span class="gray-bg">ABCDEFGHI<span class="red">J</span></span></span><br />
			<span>KLMNOPQRST</span><br />
			<span><span class="gray-bg"><span class="red">U</span>VWXYZABCD</span></span><br />
			</code>
		</td>
		<td id="tdStringB">
			<code>
			1234567890<br />
			0123456789<br />
			<span class="gray-bg">ABCDEFGHI<span class="red">K</span></span></span><br />
			KLMNOPQRST<br />
			<span class="gray-bg"><span class="red">T</span>VWXYZABCD</span><br />
			</code>
		</td>
	</tr>
</table>

CSS

#string-compare td
	{
		line-height: 1;
		counter-reset: br;
	}
	
	.gray-bg
	{
		background-color: #ddd;
	}
	
	.red
	{
		color: #ff0000;
	}
	
	.line-numbers
	{
		display: inline-block;
		width: 1.5em;
		border-right: 1px solid #000;
		text-align: right;
		margin: 0 1em 0 -1em;
		padding:0 .5em 0 1em;
	}

JavaScript

var APP = {};
(function() {
	this.addLineNumbers = function() {
		var spans = $('#tdStringA code > span');
		for (var i = 0; i < spans.length; i++) {
			var item = $(spans[i]);
			if ($(item).children().has("span").hasClass("gray-bg")) {
				$(item).prepend('<span class="line-numbers red">' + (i + 1) + "</span>");
			}
			else {
				$(item).prepend('<span class="line-numbers">' + (i + 1) + "</span>");
			}
		}
	};
}).call(APP);

$(document).ready(function() {
	APP.addLineNumbers();
});