Icon does not align well with text in Chrome - html

Question

I'm trying to get the bottom of an icon to line up with some text (to the pixel - the lowest pixel of the first S should be at the same height as the lowest pixel of the foler icon) across browsers, but Chrome is always giving me different results.
Fiddle:
http://jsfiddle.net/LrhB7/1/
HTML:
<div class="study-box set-box">
<div class="set-box-title">
<i class="icon-folder-close-alt">
</i>
<div>SHOULD BE LINED UP WITH BOTTOM OF FOLDER</div>
</div>
</div>
CSS:
.study-box {
width: 200px;
height: 120px;
margin: 2px;
float: left;
color: white;
text-align: center;
font-size: 15px;
position: relative; }
.folder-box-title > div, .set-box-title > div {
-ms-text-overflow: ellipsis !important;
-o-text-overflow: ellipsis !important;
text-overflow: ellipsis !important;
white-space: nowrap;
overflow-x: hidden;
display: inline-block;
text-align: justify;
width: 162px !important;
padding-bottom: 0px;
margin-bottom: 0px;
line-height: 20px;
position: relative; }
.set-box-title {
position: absolute;
bottom: 0;
left: 0;
margin-left: 10px;
padding-bottom: 7px; }

Answer 1

This should be what you're looking for: http://jsfiddle.net/W3WW7/1/
<div class="study-box set-box">
<div class="set-box-title">
<i class="icon icon-folder-close-alt">
</i>
<div>SHOULD BE LINED UP WITH BOTTOM OF FOLDER</div>
</div>
</div>
Changed:
.folder-box-title > div, .set-box-title > div {
-ms-text-overflow: ellipsis !important;
-o-text-overflow: ellipsis !important;
text-overflow: ellipsis !important;
white-space:nowrap;
overflow-x:hidden;
display: inline-block;
text-align: justify;
width: 162px !important;
padding-bottom: 0px;
margin-bottom: 0px;
line-height: 20px;
position: relative;
top: 2px; // changed this line
}
Added:
.icon {
vertical-align: text-bottom;
}