Text um Bereichseingang vertikal in html verschoben

Question

I den folgenden Code für Bereichseingang hat, zusammen mit einigem Stil angewandt:

<style media="screen"> 
    .contactinfo label{display: inline-block; 
    width: 170px; 
    text-align: right; 
    vertical-align:top; 
    } 
    .contactinfo div ~ div { 
    margin-top: 2px; 
    } 
    .contactinfo {background:lightyellow; border:10px solid yellow; margin-bottom:10px; width: 720px;} 
    .contactinfo textarea {width: 180px; box-sizing: border-box;} 
    </style> 
    <fieldset class="contactinfo"> 
     <legend>Your indicators</legend> <br> 
     <div class=""> 
      <label for="ht">Height:</label> 
      Short <input type="range" name="ht" id="ht" value="" min="0" max="100"> Tall 
     </div> 
     <div class=""> 
      <label for="sal">Salary:</label> 
      Poor <input type="range" name="ht" id="ht" value="" min="0" max="100"> Rich 
     </div> 
     </fieldset> 

aber der Text auf beiden Seiten des Bereichseingangs nicht richtig ausgerichtet ist. Hier ist, wie es jetzt aussieht: Auch nachdem ich vertikal-align: top entfernen es nicht richtig ausgerichtet. Dies ist, wie es jetzt aussieht: Was ich will, ist (das Highlight ignorieren):

Answer 1

entfernen vertical-align:top; siehe https://jsfiddle.net/aqfcde2d/