JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">
    TEST 1: Q in a Q
    <div><q>Q <q>Q</q></q> Text</div>
    <div><q>Q <q>Q</q></q> <span>Span</span></div>
    <div><q>Q <q>Q</q></q> </div>
    <div><q>Q <q>Q</q> Text</q> </div>
    <div><q>Q <q>Q</q> Text</q> Text</div>
    <div><q>Q <q>Q <q>Q</q></q> Text</q> Text</div>
    <div><q>Q <q>Q <q>Q</q></q> Text</q></div>
    <div><q>Q <q>Q <q>Q</q></q></q> Text</div>
    <div><q>Q <q>Q <q>Q</q></q></q></div>

    <div><span>Span <span>Span</span></span> Text</div>
    
    TEST 2: Some unknown combination of inline elements
    <div>
        <span>Span</span>
        <span>Span</span>
        <span>Span</span>
    </div>

    <div>
        <span>Span</span>
        <span>Span</span>
        <span></span>
        <span></span>
        <span>Span</span>
        <span></span>
    </div>

    <div>
        <span>Span</span>
        <span>Span</span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    
    <div>
        Text
        <span>Span</span>
        <span>Span</span>
    </div>
    
    <div>
        <span>Span</span>
        <span>Span</span>
    </div>
    
    <div>
        <span>Span</span>
        Text
        <span>Span</span>
    </div>
    
    <div>
        <span>Span</span>
        Text
        <span>Span</span>
        <span>Span</span>
    </div>
    
    <div>
        <span>Span</span>
        <span>Span</span>
        Text
        <span>Span</span>
        <span>Span</span>
        <span>Span</span>
    </div>
    
    <div>
        <span>Span</span>
        <span>Span</span>
        <span>Span</span>
        <span>Span</span>
        <span>Span</span>
        <span>Span</span>
    </div>
    
    <div>
        Text
        <div>Div</div>
        <span>Span</span>
    </div>
    
    <div>
        Text
        <div>Div</div>
        <div>Div</div>
    </div>
    
    <div>
        <div>Div</div>
        <div>Div</div>
        <div>Div</div>
    </div>
    
    <div>
       ...

CSS

#test div, #test table {
    margin-bottom: 1em;
}

#test * {
    padding: 1px;
    border: 1px solid #0f0;
    margin: 1px;
}

#test div, #test label {
    border-color: #00f;
}

#test > div {
    border-width: 3px;
}

#results {
    display: block;
    font-size: 100%;
    
    margin-top: 1em;
    border-top: 1px solid grey;
    padding-top: 1em;
}

JavaScript

String.prototype.toHtml = function() {
    return this.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
};

$(document).ready(function() {
    var failed = {},
        i = 0;
    $('*').each(function() {
        if(/^(?:body|html|head|style|link)\b/i.test(this.nodeName)) {
            return;
        }
        var $this = $(this);
        $this.css("display", "none");
        if ($this.is(":visible")) {
            $this.text('FAIL ' + ++i);
            failed[i] = [
                this.outerHTML,
                this.hasLayout === -1,
                this.offsetWidth,
                this.offsetHeight
            ];
            $this.css("color", "red");
        }
        $(this).css("display", "");
    });

    var results = '';
    for (var fail in failed) {
        results += (failed[fail][0] + ' (' + failed[fail].splice(1, 3).join(', ') + ')').toHtml() + '<br />';
    }
    $('#results').html(results);
});