Add square beside text form

Issue

I want to place a square beside Yes and beside No text as:

I try:

.yesNoSquare {
  width: 10px;
  height: 10px;
  border: 1px solid;
}

<div>
  <span class="yesNoSquare" /> YES
  <span class="yesNoSquare" /> NO
</div>

But it is adding the label inside square, how can I do my expected result?

Solution

Try this. Hope it helps.

.yesNoSquare {
  width: 10px;
  height: 10px;
  border: 1px solid;
  display: inline-block;
}

    <div>
      <span class="yesNoSquare"></span>
      <span> YES</span>
      <span class="yesNoSquare"></span>
      <span> NO</span>
    </div>

Answered By - theoptimalape