Flex runtime spacer

I am using Flex 4 for one of my Flex project. That project needs some dynamic spacing between the components. Here is the example code for the runtime spacer. I am using spark components here.

Code:

<?xml version="1.0" encoding="utf-8"?>

<s:Application name="Spark_Spacer_Test"
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx" >

<s:controlBarContent>
    <s:Label text="Space (px):" />
    <s:HSlider id="sl" minimum="0" maximum="600" value="200" />
</s:controlBarContent>

<s:HGroup top="20" horizontalCenter="0">
    <s:VGroup>
        <s:Button id="button1" label="Me" />
    </s:VGroup>
    <s:VGroup id="vSpacer" width="{sl.value}" >
        <s:Rect width="{sl.value}" height="0" />
    </s:VGroup>
    <s:VGroup>
        <s:Button id="button2" label="You" />
    </s:VGroup>
</s:HGroup>

</s:Application>

Running example: