Add square with X in the same row

July 27, 2022

I have a simple square with yes or no label as:

.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>

Now I want to add an "X" inside square so I 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>

The problem is that I use div instead a span because span did not shown the square correctly, but when I try it, the "X" square does not shown in the same line.

The desire result:

>Solution :

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>