JSFiddle - React, Tailwind, and code Playground
HTML
<p>normal</p>
<p>normal</p>
<p>normal</p>
<p>normal</p>
<p>normal</p>
<p>normal</p>
<p>normal</p>
<p>normal</p>
<p>normal</p>
<p>normal</p>
<p>normal</p>
<p>Lucifer</p>
<p style="text-indent:55px; margin-top:-16px;">himself</p>
<p>normal</p>
<p>normal</p>
<p>normal</p>
<p>normal</p>
<p>normal</p>
JavaScript
function sameHorizon( obj1, obj2, tolerance ) {
var tolerance = tolerance || 0;
var obj1top = obj1.offset().top;
var obj2top = obj2.offset().top;
return (Math.abs(obj1top - obj2top) <= tolerance);
}
$('p').each(function(i,obj) {
if ($(obj).css('margin-top').replace('px','') < 0) {
var p1 = $(obj).prev('p');
var p2 = $(obj);
var pTol = 4; // pixel tolerance to be considered aligned
if (sameHorizon(p1, p2, pTol)) {
// put what you want to do with these objects here
// I just highlighted them for example
p1.css('background','#cc0');
p2.css('background','#c0c');
// but you can manipulate their contents
console.log(p1.html(), p2.html());
}
}
});