Flex 4 - How to align FormItem Label and TextInput?

Question

I have the FormItem with Label and TextInput controls.

Sample code

    <s:FormItem id="mobileLabel" label="Mobile Number">
        <s:TextInput id="mobileInput"/>
    </s:FormItem>
    <s:FormItem id="emailLabel" label="Email ID" required="true">
        <s:HGroup>
            <s:TextInput id="emailInput"/>
            <s:Label id="bindingLabel" text="@xyz.com"/>
        </s:HGroup> 
    </s:FormItem>

Output like this:

How to align the label text as bottom of the label? like this

Answer 1

You can use the HGroup's proberty verticalAlign. Then your HGroup statement will look like:

<s:HGroup verticalAlign="middle">
  <s:TextInput id="emailInput"/>
  <s:Label id="bindingLabel" text="@xyz.com"/>
</s:HGroup>