Aligning small icons next to br'd text
I'm not quite sure if this is the right way to go about it but I have a div which contains some text which is broken up using a <br /> and would like to place some small icons to the right of the text. I have tried using vertical-align on the image which I would normally use if the text wasn't broken up but that doesn't seem to be having any effect.
Below is a link to a test page for the code which I've also pasted in below.
Any ideas on how best to do this? Maybe some alterations could be made to the width of the text's area itself so it wraps around with CSS? One solution would be to split the div up I guess?
<div style="padding:10px; font-family:Lusitana; text-transform:uppercase; font-size:0.8em; float:left;
text-shadow: black 0.15em 0.15em 0.2em;
border: 1px solid #3d1414; outline: 2px solid #522a2a;">
Add us for the latest<br />in our news and events<img src="twitter.png" alt="" style="vertical-align:-80%;" /><img src="twitter.png" alt="" style="margin-left:10px; vertical-align:-80%;" /> <img src="twitter.png" alt="" style="margin-left:10px; vertical-align:-80%;" />