Aligning text of different sizes on different levels - html

Question

I'm trying to align text of different sizes on different levels. See the image below to see what I want:
Here is the code I'm trying but it does not seem to work.
div {
background: #1FA3A2;
padding: 50px;
color: #fff;
font-family: sans-serif;
}
<div>
<span style="vertical-align:text-top; font-size:14px;">$</span>
<span style="font-size:30px; vertical-align:top;">199</span>
<span style="font-size:14px; vertical-align:bottom;">/month</span>
</div>
Any help would be really appreciated!

Answer 1

You can specify the line height of the spans as well, and therefore influence the vertical alignment.
div {
background: #1FA3A2;
padding: 50px;
color: #fff;
font-family: sans-serif;
}
<div>
<span style="vertical-align:top; font-size:14px;">$</span>
<span style="font-size:30px; line-height:27px; vertical-align:bottom;">199</span>
<span style="font-size:14px; line-height:16px; vertical-align:bottom;">/month</span>
</div>

Answer 2

You can use the positions and top css attributes to solve the miner alignment issue in your code. See the updated code. Recommending to write the style alone (Instead of inline styles). The given style (top: 'value';) the following code may change based on the overall style which you are planing to give (same as like the picture with the question)
<div>
<span class="dlr">$</span>
<span style="font-size:30px; vertical-align:top;">199</span>
<span class="perd" >/month</span>
</div>
.dlr{
vertical-align:text-top;
font-size:14px;
position:relative;
top:6px;}
.perd{
font-size:14px;
vertical-align:bottom;
position:relative;
top:-4px;}
Here are the Demo

Answer 3

Try:
.a{font-size:12px; vertical-align:text-top; }
.b{font-size:30px; vertical-align:middle}
.c{font-size:12px; vertical-align:sub;}
With:
<div>
<span class="a">$</span>
<span class="b">199</span>
<span class="c">/month</span>
</div>
http://jsfiddle.net/z03cynrp/1/

Answer 4

HI now used to this after or before css property as like this
div > span{
position:relative;
display:inline-block;
vertical-align:top;color:#fff;
}
div > span:after{
position:absolute;
content:"$";
font-size:14px;
top:4px;
left:-6px;
}
div > span:before{
position:absolute;
content:"/month";
font-size:14px;
bottom:3px;
right:-38px;
}
div{background:blue; padding:20px 0; text-align:center;}
<div>
<span style="font-size:30px; vertical-align:top;">199</span>
</div>

Answer 5

This has to do with the fact that all the three of them do not have the same line-heights. I could modify your code to align as you wanted.
span {
line-height: 32px;
}
<div>
<span style="font-size:14px; vertical-align:text-bottom">$</span>
<span style="font-size:30px;">199</span>
<span style="font-size:14px;">/month</span>
</div>
PS: Dont use inline style unless you absolutely have to