s:Panel 2x2 instead of 4x1 horizontal

Question

Disclaimer: Entry level user. I'm trying to make my s:Panel's 2x2 instead of 4x1 Horizontal as the code below demonstrates.

My goal:

Brightness - Contrast

Hue - Saturation

I've tried HorizontalLayout and VerticalLayout but can't figure out what to do because the examples found here don't help: http://help.adobe.com/en_US/flex/using/WS0141D24B-6AEB-4721-BA04-9BF15F86350F.html

                            <s:Panel title="Brightness" width="247" height="67.5" backgroundColor="0xA0A0A0">
                                    <s:layout>
                                            <s:VerticalLayout paddingLeft="8"/>
                                    </s:layout>
                                    <s:HSlider id="BrightnessSlider" width="220" showDataTip="false" minimum="1" maximum="100" value="100" change="BrightnessChanged(event)"/>
                            </s:Panel>

                            <s:Panel title="Contrast" width="247" height="67.5" backgroundColor="0xA0A0A0">
                                    <s:layout>
                                            <s:VerticalLayout paddingLeft="8"/>
                                    </s:layout>
                                    <s:HSlider id="ContrastSlider" width="220" showDataTip="false" minimum="1" maximum="100" value="100" change="ContrastChanged(event)"/>
                            </s:Panel>

                            <s:Panel title="Hue" width="247" height="67.5" backgroundColor="0xA0A0A0">
                                    <s:layout>
                                            <s:VerticalLayout paddingLeft="8"/>
                                    </s:layout>
                                    <s:HSlider id="HueSlider" width="220" showDataTip="false" minimum="1" maximum="100" value="100" change="HueChanged(event)"/>
                            </s:Panel>

                            <s:Panel title="Saturation" width="247" height="67.5" backgroundColor="0xA0A0A0">
                                    <s:layout>
                                            <s:VerticalLayout paddingLeft="8"/>
                                    </s:layout>
                                    <s:HSlider id="SaturationSlider" width="220" showDataTip="false" minimum="1" maximum="100" value="100" change="SaturationChanged(event)"/>
                            </s:Panel>

                    </s:NavigatorContent>

Answer 1

How about to use HGroup and VGroup.

<s:VGroup>
    <s:HGroup>
        <s:Panel title="Brightness" ...>
            <s:layout>
                <s:VerticalLayout paddingLeft="8"/>
            </s:layout>
            <s:HSlider id="BrightnessSlider" ... />
        </s:Panel>
        <s:Panel title="Contrast" ...>
            ...
        </s:Panel>
    </s:HGroup>

    <s:HGroup>
        <s:Panel title="Hue" ...>
            ...
        </s:Panel>
        <s:Panel title="Saturation" ...>
            ...
        </s:Panel>
    </s:HGroup>
</s:VGroup>