JSFiddle - React, Tailwind, and code Playground

HTML

<div class="custom-banners"> <a class="banner-link" href="#"><span>test 1 test 1 test 1 test 1 test 1</span></a>
 <a class="banner-link" href="#"><span class="test">test 2 test 2 test 2 test 2 test 2</span></a>
 <a class="banner-link" href="#"><span>test 3</span></a>
 <a class="banner-link" href="#"><span>test 4</span></a>
 <a class="banner-link" href="#"><span>test 5</span></a>

</div>
<span>I'm a lonely span with a lot of text OH BOY</span>

CSS

a {
    display:block;
}
.custom-banners a span {
    line-height: 20px;
}
span {
    width: 100px;
}

JavaScript

$(document).ready(function () {
    $(window).on("resize", function () {
        $('.custom-banners span').each(function () {
            var divheight = $(this).height();
            var lineheight = 20;
            if (divheight >= lineheight*2) {
                $(this).style('style', 'color: red');
            } else {
                $(this).attr('style', 'color: black');
            };
        });
    });
});