How to push input tag to the middle as the other input tags are even if there is span?

Question

Here is the picture

Please note its made using bulma for additional info.

This is the code:

<div class="select">
  <select>
    <option>Selected</option>
    <option></option>
  </select>
</div>
<span class="crossback">&#10006;</span>
<br/>
<div class="select">
  <select>
    <option>Select</option>
    <option></option>
  </select>
</div>
<br/>

Now the problem is that the first input tag has cross but the second don't but I want to align the first input tag with respect to the second one and push the cross button to the little bit right.

Please state a solution for this even there are many input tag but only have one cross to an input tag also if there is more than one cross how the align the following for the same kind.

BTW thank you for sharing your knowledge and experience.

Answer 1

Give the cross a position absolute, so the select will not be shifted to the left, and move the cross inside the tag div.select .

.select {
  position: relative
}
.crossback{
     position: absolute;
    left: 84px;
}

<div class="select">
  <select>
    <option>Selected</option>
    <option></option>
  </select>
  <span class="crossback">&#10006;    </span>
</div>
<br/>
<div class="select">
  <select>
    <option>Select</option>
    <option></option>
  </select>
</div>
<br/>