How to get elastic table next to an image?

Question

This is what I want:

This is the best I could come up with:

CSS

img
{
  background: red;
  float: left;
}

table
{
  background: yellow;
  width: 90%;
}

HTML

<img src="image.jpg" width="40" height="40" />
<table>
  <tr><td>Table</td></tr>
</table>

There is a problem with this approach. If you resize browser window at some point the table jumps below the image: click to view demo.

What is the better way of achieving this layout?

Answer 1

Try surrounding your table with div like that:

<img src="image.jpg" width="40" height="40" />

<div style="padding-left:40px">       
  <table> 
    <tr><td>Table</td></tr> 
  </table> 
</div>

Answer 2

Some people might not like tables, but you could use a table with 2 cells that contains your image on the left and the table on the right.