Style label with radiobutton inside - css

Question

I have a label I need styled depending on the state of the checkbox inside. Unfortunately I am constrained about changing the html structure! (Last resort is a javascriptsolution).
Is it even possible with a html structure as below
.like-this {
border: 1px solid black;
background: white;
color: black;
padding: 2px 4px;
}
.selected {
background: red;
color: white;
}
<label>
<input type="radio" name="field_123" value="Yes" class="Radio-Button">
I need same border
</label>
<label>
<input type="radio" name="field_123" value="No" class="Radio-Button"">
I need same border
</label>
<br/>
<span class="like-this">Not Selected</span>
<span class="like-this selected">Selected</span>

Answer 1

let form = document.querySelector( "form" );
form.addEventListener( "change", ( evt ) => {
let trg = evt.target,
trg_par = trg.parentElement;
if ( trg.type === "radio" && trg_par && trg_par.tagName.toLowerCase() === "label" ) {
let prior = form.querySelector( 'label.checked input[name="' + trg.name + '"]' );
if ( prior ) {
prior.parentElement.classList.remove( "checked" );
}
trg_par.classList.add( "checked" );
}
}, false );
label {
background: #ddd;
padding: 2px 10px 2px 0;
border: 1px solid #000;
}
label.checked {
background: #000;
color: white;
}
input{display:none;}
<form>
<label>
<input type="radio" name="field_123" value="Yes" class="Radio-Button">
I need same border
</label>
<label>
<input type="radio" name="field_123" value="No" class="Radio-Button"">
I need same border
</label>
</form>

Answer 2

input{display:none;}
label{
border: 1px solid #ddd;
cursor: pointer;
padding: 5px 20px;
}
input[type="radio"]:checked + label{
background:#000;
color:#fff;
}
<input type="radio" id="radio1" name="field_123" value="Yes" class="Radio-Button">
<label for="radio1">I need same border</label>
<input type="radio" id="radio2" name="field_123" value="No" class="Radio-Button"">
<label for="radio2">I need same border</label>