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: