Unable to get 2 floated elements to vertically align, with a margin between them and another element

I have a HTML sample here: http://jsfiddle.net/TzJmN/1/

I'm trying to get the output to appear so the item on the left and the "Tracking error" header on the left and the text on the right are vertically aligned, and have both 12px under the horizontal bar at the 开发者_如何学Pythontop. I'm unable to get this right though. The item on the left insists on staying packed into the top left corner, and the item on the right insists on staying too far from the horizontal bar!

I have a strong feeling it's because I'm using floats, but I don't know how to resolve this.

Any suggestions?

What about using position:absolute; top:12px; bottom:0; left:0; width:100px and giving the text div a margin that matches the width + the margin you want in between them margin-left:110px;. This way also scales nicely when you resize the browser.

Have a look here: http://jsfiddle.net/TzJmN/3/

Try resizing your browser window.

EDIT: made some minor change to have the 12px distance from the top border

Add padding-top: 10px; to .risk-statistic-container

Edit:

Sorry, try this:

http://jsfiddle.net/aFb3F/

You floats were being cleared