Flex 4 transition: Glitch with simultaneous move and resize - apache-flex

Question

I'm building a user interface and I have two panels which I need to move and resize. They have to look as a single panel. It works fine when I move or resize only one. But when one moves and the other resizes at the same time... an intermittent line appears between the two.
How can I avoid this?
Here is a working example of the problem:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:components="components.*"
frameRate="30" height="400" width="200" >
<s:states>
<s:State name="minimized" />
<s:State name="maximized" />
</s:states>
<s:transitions>
<s:Transition>
<s:Parallel duration="4000" targets="{[one, two]}">
<s:Move target="{two}" />
<s:Resize target="{one}" />
</s:Parallel>
</s:Transition>
</s:transitions>
<s:Group id="one"
width="200"
height.minimized="20" height.maximized="200"
y="0">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="black" />
</s:fill>
</s:Rect>
</s:Group>
<s:Group id="two"
width="200"
height="200"
y.minimized="20" y.maximized="200">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="black" />
</s:fill>
</s:Rect>
</s:Group>
<s:Button click="currentState=(currentState=='minimized'? 'maximized' : 'minimized')" label="{currentState}" />
</s:WindowedApplication>
Thanks in advance!
Updated: Here's a version with VGroup:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:components="components.*"
frameRate="30" height="400" width="400" >
<s:states>
<s:State name="minimized" />
<s:State name="maximized" />
</s:states>
<s:transitions>
<s:Transition>
<s:Parallel duration="4000" targets="{[one, two, three]}">
<s:Move target="{two}" />
<s:Resize target="{one, three}" />
</s:Parallel>
</s:Transition>
</s:transitions>
<s:Group id="one"
width="200"
height.minimized="20" height.maximized="200"
y="0">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="black" />
</s:fill>
</s:Rect>
</s:Group>
<s:Group id="two"
width="200"
height="200"
y.minimized="20" y.maximized="200">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="black" />
</s:fill>
</s:Rect>
</s:Group>
<s:VGroup gap="0" left="200">
<s:Group id="three"
width="200"
height.minimized="20" height.maximized="200"
y="0">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="black" />
</s:fill>
</s:Rect>
</s:Group>
<s:Group id="four"
width="200"
height="200">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="black" />
</s:fill>
</s:Rect>
</s:Group>
</s:VGroup>
<s:Button click="currentState=(currentState=='minimized'? 'maximized' : 'minimized')" label="{currentState}" />
</s:WindowedApplication>

Answer 1

Place both in the same VGroup and change the height of the first panel only.