JSFiddle - React, Tailwind, and code Playground

HTML

//sample 1
<div class="outer"> outer-a 1
    <div>
        <div class="inner"> inner-a 1
            <div class="outer"> outer-b 1
                <div class="inner"> inner-b 1</div>
            </div>
        </div>
    </div>
    <div>
        <div class="inner"> inner-a 1</div>
    </div>
</div>

//sample 2
<div class="outer"> outer-a 2
    <div class="inner"> inner-a 2
        <div class="outer"> outer-b 2
            <div>
                <div class="inner"> inner-b 2</div>
            </div>
        </div>
    </div>
</div>

//sample 3
<div class="outer"> outer-a 3
    <div class="inner"> inner-a 3
        <div class="outer"> outer-b 3
            <div class="inner"> inner-b 3
                <div class="outer"> outer-c 3
                    <div class="inner"> inner-c 3</div>
                </div>
            </div>
        </div>
    </div>
</div>

//bonus sample (we're trying to avoid this)
<div class="outer"> outer-a b
    <div class="inner outer"> inner-a outer-b b
        <div class="inner"> inner-b b</div>
    </div>
</div>
<div id="output">
</div>

CSS

pre {
    border: 1px solid gray;
}

div.outer {
    border: 1px solid #adadad;
    margin-left: 2px;
}

div.inner {
    border: 1px solid #aaaaaa;
    margin-left: 2px;
}

JavaScript

$(function(){
    var list = $('.outer:not(.inner):has(:not(.outer) .inner:not(.outer), > .inner:not(.outer))');
    list.each(function(){
        $('#output').append(
            $('<pre/>',{
                text: $(this).html()
            }
             )
        )
            }
            );
    });