JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    
    <div><small><b>&ltdiv&gt</b> element</small></div>
    <p><small><b>&ltp&gt</b> element (<b>div + p</b> selects all <b>&ltp&gt</b> elements that are placed immediately after <b>&ltdiv&gt</b> elements)</small></p>
    <p><small>Second <b>&ltp&gt</b> element</small></p>
    
    <br/>
    
    <h2>How can I select all <b>&ltdiv&gt</b> elements that are placed immediately BEFORE <b>&ltp&gt</b> elements?</h2>
    
</header>

CSS

*{margin:0;padding:0;}
div + p {color:red;}
p {color:blue;}

header{margin:20px 0 0 20px;}