JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Problem</h1>
<p>I want to target a value in one node tree based on the attributes of a node element in a sibling tree.</p>

<h1>I can do it here, when the sibling is the top level:</h1>
<p>Make the name pink by setting the value pink if it's after an <code>&lt;h2&gt;</code> with the attribute <code>data-section="name"</code></p>
<div>
    <h2 data-section="name">Name</h2>
    <p class="hint">Full name of the employee</p>
    <p>
        <span class="value1">Joe Tester</span>
    </p>
</div>

<div>
    <h2 data-section="details">Occupation</h2>
    <p class="hint">Job role or title</p>
    <p>
        <span class="value1">Software Engineer</span>
    </p>
</div>

<h1>Can I do it here?</h1>
<p>When the sibling with the attribute is in another tree, is it possible?</p>
<div>
    <div>
        <h2 data-section="name">Name</h2>
    </div>
    <p class="hint">Full name of the employee</p>
    <p>
        <span class="value2">Joe Tester</span>
    </p>
</div>

<div>
    <div>
        <h2 data-section="details">Occupation</h2>
    </div>
    <p class="hint">Job role or title</p>
    <p>
        <span class="value2">Software Engineer</span>
    </p>
</div>

CSS

html { background:#222; font-family:Helvetica; font-size:0.8em; font-size:1.0em; }
h1 { color:#A0E22D; font-size:1.6em; }
h2 { color:#60D9EF; margin:0; font-size:1.2em; }
p { color:#eee; margin:0.6em 0; }
p.hint { font-size:0.8em; font-style:italic; color:#999; margin:0; }

code { font-family:'Source Code Pro', 'Monaco', 'Andale Mono', 'Deja Vu Sans Mono', 'Consolas', monospace; color:#999; }

h2[data-section="name"]~p .value1 {
  color: #f00;
}

/* This doesn't work */
div h2[data-section="name"]~p .value2 {
  color: #F92759;
}