выравнивание текста двух элементов span

Question

Я хочу, чтобы оба элемента span #spl и #xspl были одинаково и правильно выровнены. Help, чтобы он выглядел равным по размеру. Оба они должны быть одинаковыми и правильно выровнены. Он должен выглядеть следующим образом:

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

Answer 1

Вы можете выровнять их, давая фиксированный width к ним.

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