How to vertically align first lines of text in table cell?

Question

I have this situation where first table cell contains "name" and second cell some text. Text may have embedded images. When image appears on the first line it pushes down entire first line. It makes first text line to be no longer aligner with first cell text. I want to make first lines of both table cells aligned.

<table>
    <tr>
        <td class="align">one</td>
        <td>two <img src="http://www.emofaces.com/en/emoticons/v/vampire-emoticon-before-lunch.gif" /> three three three three three three three three three three three three three three three three three three three</td>
    </tr>
</table>

http://jsfiddle.net/gdx0qhcc/31/

In following fiddle goal is to align word "one" to word "two". I know i could vertical-align: top; on image, but it pulls text of second cell up and it looks bad therefore it is not an option. Any kind of solution would work really, be it css/javascript/webkit-only solution.

EDIT: Note that height and width of image may vary. I also updated fiddle with image alignment being "middle". It does not change situation really.

EDIT2: Final solution "hack" http://jsfiddle.net/Lqcx2vfg/ Thank you everyone

Answer 1

HTML:

<table>
<tr>
    <td class="align">one</td>
    <td>two <img src="http://www.emofaces.com/en/emoticons/v/vampire-emoticon-before-lunch.gif" /> three three three three three three three three three three three three three three three three three three three</td>
</tr>

CSS:

*{
    margin: 0;
    padding: 0;
}
table, tr, td {
    border: solid 1px red;
    line-height: 16px;
}
.align {
     vertical-align: top; 
}

JavaScript:

$(document).ready(function() {
$('.align').css('padding-top',(parseInt($('img').css('height'))-16)+"px");

//16 is the line-height });

Answer 2

You can put image into second row: modify HTML and CSS as shown below:

HTML

<table>
    <tr>
        <td class="align">one</td>
        <td>two three three three three three three three three three three three three three three three three three three three</td>
    </tr>
    <tr>
        <td style="border-top:none;">
        </td>
        <td>
            <img src="http://www.emofaces.com/en/emoticons/v/vampire-emoticon-before-lunch.gif" /> 
        </td>
    </tr>
</table>

CSS

table, tr, td {
    border: solid 1px red;
}

.align {
    vertical-align: top;
    border-bottom:none;
}

Regards,

Answer 3

Another idea... I think that what you want requires JavaScript, yeah...

span {
    display: inline-block;
    vertical-align: middle;
    height: 10px; width: 50px;
}
span img {
    float: left;
    position:absolute;
    margin-top: -25px; /* Try with -5px. */
}

JSFIDDLE