Bootstrap 3 -- how to use different font sizes in the same row, while aligning all the text at the bottom

Question

I am new to Bootstrap. I would like to have two columns of text in the same row, but with the first column a substantially bigger font than the second. When I do this, the text in the second column appears to be higher than the first row. I would like the text in both columns to be aligned at the bottom.

Here's an example of what it looks like now. Notice "Atlanta" is aligned vertically way higher than the name "John Doe" http://bootply.com/83705

Answer 1

update

<div class="container"> 
     <div class="row" style="border-bottom: 1px solid red;">
        <div class="col-xs-2" style="font-size:35px;">John Doe</div>
        <div class="col-xs-2" style=""><span style="font-size:35px;"></span>Atlanta</div>
      </div>
</div>  

--

I don't know if your question has to do with Bootstrap (Bootstrap let your divs float) so see also: How to align content of a div to the bottom?

try to add a padding?

<div class="container"> 
     <div class="row" style="border-bottom: 1px solid red;">
        <div class="col-xs-2" style="font-size:35px;">John Doe</div>
        <div class="col-xs-2" style="padding-top:21px;">Atlanta</div>
      </div>
</div>