範囲のスライダとラベルの整列

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/