Bottom alignment - html

Question

I have two DIVs, one is left floated with bigger font size and the other one is right floated with smaller fonts. I want to align the smaller fonted DIV to the bottom aligned with the bigger sized text. Not able to achieve it.
and the css
.floatLeft {
float: left;
}
.floatRight {
float: right;
}
.font12 {
font-size: 12px;
}
<div class="floatLeft">Activity</div>
<div class="floatRight font12 ">View timeline / Filter activities</div>

Answer 1

Answer changed to allow for float as per your request.
Please see FIDDLE.
HTML
<div class="big">Activity</div>
<div class="small">
<a href="javascript:void(0);">View timeline / Filter activities
</a>
</div>
CSS
.big {
float: left;
font-size: 2em
}
.small {
float: right;
position: relative;
font-size: 1em;
top: 13px;
}

Answer 2

Demo page
CSS needed:
.big {
display:inline-block;
vertical-align:bottom;
/* just for demo: */
font-size: 2em;
height:200px;
background:#FADDFF;
}
.small {
display:inline-block;
vertical-align:bottom;
/* just for demo: */
font-size: 1em;
background:#D2E9F7;
height:120px;
}
so making the two elements inline-block displayed, and vertical-align with value of bottom, they will be on the same level, and they're line of reference will be the bottom of them both

Answer 3

Additional to the above response, you can use display: table-cell to fit both div's to the same height:
.floatLeft {
border: 1px solid black;
font-size: 30px;
width: 200px;
display: table-cell;
vertical-align: text-bottom;
}
.floatRight {
border: 1px solid black;
font-size: 12px;
display: table-cell;
vertical-align: text-bottom;
width: 200px;
}
<div class="floatLeft">Activity</div>
<div class="floatRight font12 ">View timeline / Filter activities</div>
Here is the jsfiddle: https://jsfiddle.net/x3m72kqh/

Answer 4

JSFiddle: Solution in JSFiddle
Here is a solution with inline-block :
.big {
display:inline-block;
width: 50%;
float: left;
font-size: 2em
}
.small {
display:inline-block;
width: 50%;
font-size: 1em
}
a {
float:right;
}