CODEWITHSUNDEEP
htmlcss
rishav kumar
rishav kumar

Reputation: 57

text alignment of two span elements

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:

enter image description here

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

Upvotes: 1

Views: 45

Answers (1)

Alex
Alex

Reputation: 8695

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>

Upvotes: 3

Related Questions