Layout problem with HBox and VBox

[SiHoop]

I want to create a login screen that is always centered on the screen. Within
the login screen I want two text fields to be vertically aligned and two
corresponding text input fields to be vertically aligned. I cannot figure out
the correct use of VBox and HBox to achieve my goal. Is there a simple way to
think about this-- should I be using something other than VBox and HBox? The
code below is partially correct, but the text input boxes are not vertically
aligned.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle">
<mx:VBox >
<mx:HBox >
<mx:Label text="Username"/>
<mx:TextInput text="test text"/>
</mx:HBox>
<mx:HBox >
<mx:Label text="Password goes here"/>
<mx:TextInput text="password"/>
</mx:HBox>
</mx:VBox>
</mx:Application>

[Greg Lafrance]

I think you want a form for this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
verticalAlign="middle">
<mx:Form>
<mx:FormItem label="Username">
<mx:TextInput text="test text"/>
</mx:FormItem>
<mx:FormItem label="Password goes here">
<mx:TextInput text="password"/>
</mx:FormItem>
</mx:Form>
</mx:Application>