JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    <span class="parent">
        <span class="child">1</span>
    </span>
</p>
<p>
    <span class="parent">
        <span class="child">1</span>
        <span class="child">2</span>
    </span>
</p>

CSS

.parent {
    border: 1px solid #333;
    padding: 5px;
    position: relative;
}
.child {
    background: lightgray;
    padding: 2px 5px;
}
.child:only-child {
    background: yellow;
}

.child:only-child::before {
    border: 5px solid cyan;
    content: '';
    display: block;
    height: 100%;
    left: -1px;
    pointer-events: none;
    position: absolute;
    top: -1px;
    width: 100%;
}