text alignment of two span elements

rishav kumar Published at Dev

rishav kumar

I want both span elements #spl and #xspl to be equally and properly aligned.please help so that it looks equal in size . Both of them should be equal and properly aligned . It should look like this:

#spl {
  background: brown;
  margin: : 5px;
  padding: 5px 0;
}
#xspl {
  background-color: purple;
  margin: : 5px;
  padding: 5px 0;
}

<fieldset>
  <legend>Your Indicators</legend>

  <label for="height">Height :</label>

  <span id="spl"> Short </span>

  <input type="range" id="height" min="0" max="100" name="Height">

  <span id="xspl"> Tall </span>

  <br>

  <label for="salary">Salary :</label>

  <span id="spl">Poor </span>

  <input type="range" id="salary" min="0" max="100" name="salary">

  <span id="xspl"> Rich</span>


</fieldset>

Alex

You can align them by giving fixed width to them.

#spl {
  background: brown;
  margin: : 5px;
  padding: 5px 0;
}
#xspl {
  background-color: purple;
  margin: 5px;
  padding: 5px 0;
}
label {
  width: 100px;
  display: inline-block;
}
#spl,
#xspl,
input {
  display: inline-block;
  vertical-align: middle;
}
#spl,
#xspl {
  width: 40px;
}

<fieldset>
  <legend>Your Indicators</legend>

  <label for="height">Height :</label>

  <span id="spl"> Short </span>

  <input type="range" id="height" min="0" max="100" name="Height">

  <span id="xspl"> Tall </span>

  <br>

  <label for="salary">Salary :</label>

  <span id="spl">Poor </span>

  <input type="range" id="salary" min="0" max="100" name="salary">

  <span id="xspl"> Rich</span>


</fieldset>

Collected from the Internet

Please contact [email protected] to delete if infringement.