JSFiddle - React, Tailwind, and code Playground

by Daniel Tan

HTML

<div class="test-one"> Test One:<br/>
    <span class="first-span">span 1</span>
    <span class="second-span">span 2</span>
</div>
<div class="output-one"></div>
<div class="test-two"> Test Two:<br/>
    <span class="first-span">span 1</span>
    <span class="second-span">span 2</span>
</div>
<div class="output-two"></div>

CSS

.first-span {background-color:blue;color:#fff}
.second-span {background-color:red;}
/*
div span:not(:only-child) {
    padding-right:5px;
}
*/
div.test-one span.second-span {display:none}

JavaScript

$("div span:nth-child(2):not(:has(+ span:visible))").css("padding-right", "5px");

$("div.output-one").text("Padding-right ideally should be 0px as second span is hidden, it is: " + $("div.test-one span.first-span").css("padding-right"));
 $("div.output-two").text("Padding-right ideally should be 5px as second span is NOT hidden, it is: " + $("div.test-two span.first-span").css("padding-right"));