JSFiddle - React, Tailwind, and code Playground

HTML

<h1> Target Bar Second Element </h1>
<div class="test">
<div class="foo">Foo Element</div>
<div class="bar">Bar Element</div>
<div class="bar">Baz Element</div>
<div class="test2">Bar Second Element</div>
<div class="bar">Jar Second Element</div>
<div class="bar">Kar Second Element</div>
<div class="bar">Bar Third Element</div>
</div>

<div class="test" >
<div class="foo">Foo Element</div>
<div class="bar">Bar Element</div>
<div class="bar">Baz Element</div>
<div class="test2">Bar Second Element</div>
<div class="bar">Jar Second Element</div>
<div class="bar">Kar Second Element</div>
<div class="bar">Bar Third Element</div>
</div>

CSS

.test  
{
  margin-top:40px;
}
.test .test2 
{
  border:1px solid red;
}