How can I align the left edge of HTML form elements using CSS?

Question

I want to do the following:

aa:   ________
bbbb: ________
ccc:  ________

So I wrote:

<span>aa:</span><input type="text" /><br/>
<span>bbbb:</span><input type="text" /><br/>
<span>cc:</span><input type="text" />

And I get:

aa:________
bbbb:________
ccc:________

I know I can arrange it easy with table. How do I do it without tables with as few css as I can.

Thanks.

Answer 1

<style>
    label {
        float: left;
        clear: left;
        width: 3em;
        padding-right: .5em;
    }
</style>

<label for="a">aa:</label> <input id="a" type="text" /><br/>
<label for="b">bbbb:</label> <input id="b" type="text" /><br/>
<label for="c">ccc:</label> <input id="c" type="text" />