How to bank image to left and bottom of text?

Hello,

This picture shows what I am try to achieve...

And here is my attempt to do it with code ...
http://gupdesigns.com/temp/debug.html

And this is my HTML/CSS all in one file...

Untitled Document

.panel {
border: 1px solid #00c;
margin: 20px 20px 0px 20px;
background-color: white;
padding: 0px;
width: 300px;
}

There is some text here that I want to wrap around the picture which should be banked to the bottom right of this panel.

I want the text to fill the area of left of the happy face.

Right now, the happy face is taking up the whole bottom area.