文字底部对齐？

Question

如题？情况1.    <div style="width:300px;height:100px;">        <div style="width:200px;height:30px;float:left;font-size:20px;">文字1</div>        <div style="width:200px;height:80px;float:left;font-size:50px;">文字2</div>    </div>情况2 <div style="width:1440px;" class="clearfix"><!--清除浮动了-->        <div style="width:200px;height:30px;float:left;font-size:20px;">文字1</div>        <div style="width:200px;height:80px;float:right;font-size:50px;">文字2</div>    </div>情况3如何在情况2中，并且不知道div的height的值的时候让文字底部对齐，不能改变文字大小。说明：做标题和面包屑导航时候遇到的，列表页标题在左侧，面包屑导航在右侧。如何让他们的文字都在一条基线上。

Answer 1

<div style="width:1440px;  vertical-align: baseline" class="clearfix"><!--清除浮动了-->
   <div style="width:200px;height:30px;float:left;font-size:20px; line-height: 80px">文字1</div>
   <div style="width:200px;height:80px;float:right;font-size:50px; background:red;">文字2</div>
</div>

这样的可行？