정렬 범위 슬라이더 및 레이블

Question

세로 html 범위 슬라이드 및 현재 값을 표시하는 레이블을 정렬하려고합니다. 레이블 글꼴 크기가 100 %보다 크면 정렬되지 않는 것이 문제입니다. '라벨'과 '출력'

HTML을 모두 시도

<div> 
<output id="myoutput" class="lblFloat">Output: 50</output> 
<label for="myslider" id="mylabel" class="lblFloat">Label: 50</label> 
<input type="range" id="myslider" min="1" max="100" /> 
</div> 

CSS

div { 
display: table-cell; 
vertical-align: middle; 
height: 50px; 
border: 1px solid red; 
} 
.lblFloat 
{ 
float:right; 
font-size: 200%; 
text-align: center; 
} 

내가 flexbox 대신 table-cell 사용하는 것이 http://jsfiddle.net/sergeyvin/1v19t4no/4/

Answer 1

바이올린 :

div { 
    display: flex; 
    flex-flow: row-reverse; /* or 'row' and change the order of your html elements */ 
    align-items: center; 
    justify-content: flex-end; /* or 'flex-start' and change the order of your html elements */ 
    height: 50px; 
    border: 1px solid red; 
} 

을

http://jsfiddle.net/tupupawg/