html - How do I get two adjacent spans to display their text vertically? -
so have html
<div class="container"> <div class="jumbotron"> <div class="row"> <div class="col-xs-6"> <span class="currency-symbol">$</span><span class="price">44</span> </div> <div class="col-xs-6"> <p>/ month</p> <p>here interesting things product.</p> </div> </div> </div> </div>
and css
.container { width: 333px; margin: 0 auto; } .currency-symbol { vertical-align: top; font-size: 33px; } .price { font-size: 88px; vertical-align: top; /* doesn't work */ }
the '$' symbol aligns top text in rh column. price amount doesn't.
how vertically align '$' symbol, '44' amount , text in rh column they're in line?
jsfiddle here: http://jsfiddle.net/magician11/4k19w0fs/3/
thanks.
you can try line-height on price class
.price { font-size: 88px; line-height: 80px; }