Want text element to align at the top of cell

Question

What I'm trying to do is make the red arrows align with the text on the right in the "In this issue, you can:" section of http://jsfiddle.net/me42hfkw/ . In other words, I want the › s of rows like

                                    <td valign="top" style="font-family:Helvetica,Arial;padding-right:10px;padding-bottom:20px;">
                                        <p valign="top" style="color:#FF0000;font-size:36px;font-weight:bold;margin-top:0;">&rsaquo;</p>
                                    </td>
                                    <td valign="top" style="font-family:Helvetica,Arial;padding-bottom:20px;">
                                        <p style="color:#666666;line-height:18px;margin-top:0;">Learn about the IT and business trends driving walk-up service centers.</p>
                                    </td>
                                </tr>

to be aligned at the top of their cell. I can't figure out why it's not working; for I was able to make it work on http://jsfiddle.net/qprc69z1/ . What am I missing?

This is for an HTML email, by the way, so that I need to use as primitive of styles as possible.

Answer 1

http://jsfiddle.net/me42hfkw/1/

You can decrease the line height of your p tag to adjust the position of the text. With a font-size as large as you're using there is a lot of white space to account for. Decreasing the line height will eliminate that white space.

The difference between the fiddle's you provided is that the one didn't have a p tag it was inside of a td which "plays" a little better when using vertical align.