Problem positioning customized X in a square in the same row - html

Question

I have a simple square with a yes or no label:
.yesNoSquare {
width: 10px;
height: 10px;
border: 1px solid;
display: inline-block;
}
.yesNoSquare-space {
padding-right: 20px;
}
<div class="textCenter">
<span class="yesNoSquare"></span>
<span class=" yesNoSquare-space itemsTableHeader"> YES</span>
<span class="yesNoSquare"></span>
<span class="itemsTableHeader"> NO</span>
</div>
I want to add an "X" inside the square to do something like this:
.yesNoSquare {
width: 10px;
height: 10px;
border: 1px solid;
display: inline-block;
}
.yesNoSquare-space {
padding-right: 20px;
}
.yesNoSquare-cross {
height: 10px;
width: 10px;
/*background-color: #FA6900;*/
position: relative;
border: 1px solid;
}
.yesNoSquare-cross:after {
position: absolute;
top: -45px;
bottom: 0;
left: 0;
right: 2px;
content: "\2716";
line-height: 100px;
text-align: center;
color: #000000;
}
<div class="textCenter">
<div class="yesNoSquare-cross"></div>
<span class=" yesNoSquare-space itemsTableHeader"> YES</span>
<span class="yesNoSquare"></span>
<span class="itemsTableHeader"> NO</span>
</div>
I used div instead of span because span did not display the square correctly, but when I try it, the square with the "X" does not display in the same line.
The desired result:

Answer 1

Just add display: inline-block; to .yesNoSquare-cross.
.yesNoSquare {
width: 10px;
height: 10px;
border: 1px solid;
display: inline-block;
}
.yesNoSquare-space {
padding-right: 20px;
}
.yesNoSquare-cross {
height: 10px;
width: 10px;
/*background-color: #FA6900;*/
position: relative;
border: 1px solid;
display: inline-block;/*the new code*/
}
.yesNoSquare-cross:after {
position: absolute;
top: -45px;
bottom: 0;
left: 0;
right: 2px;
content: "\2716";
line-height: 100px;
text-align: center;
color: #000000;
}
<div class="textCenter">
<div class="yesNoSquare-cross"></div>
<span class=" yesNoSquare-space itemsTableHeader"> YES</span>
<span class="yesNoSquare"></span>
<span class="itemsTableHeader"> NO</span>
</div>

Answer 2

All that is needed are two standard checkboxes or two standard radio buttons. You can customize the look, once you decide which one you want.
<input type="checkbox" id="check-yes">YES
<input type="checkbox" id="check-no">NO
<hr />
<input type="radio" id="radio-yes" name="yesno">YES
<input type="radio" id="radio-no" name="yesno">NO

Answer 3

Use the semantically correct tags which are <label> and <input type="checkbox"> or <input type="radio">. The example below shows how to customize labels, and checkbox/radio buttons. I used radio buttons since the boxes in OP were labeled "YES" and "NO". By assigning each radio button the same name value (in this case name="yn"), the radio button group become mutually exclusive, meaning that only one radio button can be checked while the other(s) must be unchecked.
html {
font: 300 2ch/1.25 'Segoe UI'
}
fieldset {
display: flex;
align-items: center;
width: max-content;
border-radius: 2px;
}
legend {
font-size: 1.1rem;
}
input {
font: inherit;
font-size: 100%;
}
label {
display: inline-flex;
align-items: center;
margin-right: 1rem;
cursor: pointer;
}
label:first-of-type {
margin-left: 0.45rem;
}
input.x {
display: none;
}
label b {
position: relative;
display: inline-flex;
align-items: center;
margin-right: 0.5rem;
padding: 3px;
border: 0.5px inset black;
border-radius: 2px;
transform: scale(1.75);
}
input.x:checked+label b::before {
content: '\2716';
position: absolute;
z-index: 1;
margin-left: -0.3rem;
font-style: oblique;
font-weight: 900;
font-size: 0.65rem;
line-height: 0.5;
color: #F00;
}
<fieldset>
<legend>Custom Radio Button Group</legend>
<input id='yes' class='x' name='yn' type='radio'>
<label for='yes'><b></b> YES</label>
<input id='no' class='x' name='yn' type='radio'>
<label for='no'><b></b> NO</label>
</fieldset>