JSFiddle - React, Tailwind, and code Playground

by Jonny

HTML

<div class="wrapper">
    <div class="items">
        <ul>
          <li>Apples</li>
          <li>Oranges</li>
          <li>Bananas</li>
        </ul>
    </div>
    <div class="separator">This will change color depending if <code>.items</code> exists</div>
</div>

CSS

/* Default style for separator */
.separator {
    background-color: red;
    width: 100%;
    height: 20px;
    color: white;
}
/* If .items has an immediate .separator sibling follow it.  */
.items + .separator {
    background-color: green;
}

/* Re-order the elements */
.wrapper { display: table; }
.items { display: table-footer-group; }
.separator { display: table-header-group; }