JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hidden">
    <p>Should the line now be yellow?</p>
</div>
<div class="below">
    <p>Click me</p>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
.hidden {
    display: none;
}
.below {
    height: 10px;
    background: red;
    margin-top: 100px;
}
/* Margin of Below should reduce when hidden is opened */
.hidden[style*="display: block"] + .below {
    margin-top: 10px; background: yellow;
}

JavaScript

$('html').click(function() {
    $('.hidden').slideToggle();
});