Center things in Spark ConstraintColumns?

Question

I have a Flex 3.5 app that I'm trying to upgrade to 4.5 and Spark.
The app splits the width of your screen into two columns and centers objects on each side, one in the left half and one in the right.  I'm at a loss as to how to duplicate this functionality using Spark components.  Here's a basic example of the old 3.5 code that works fine.  It basically creates two columns and horizontally and vertically centers items within them:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               backgroundColor="blue">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <mx:Canvas id="mainContentArea"
             top="100" bottom="100"
             width="100%"
             backgroundColor="red">
        <mx:constraintColumns>
            <s:ConstraintColumn id="col1" width="{width/2}" />
            <s:ConstraintColumn id="col2" width="{width/2}" />
        </mx:constraintColumns>
        <mx:Canvas id="greenContainer"
                           backgroundColor="green"
                           width="400" height="300"
                           horizontalCenter="col1:0"
                           verticalCenter="0">
        </mx:Canvas>
        <mx:Canvas id="yellowContainer"
                   backgroundColor="yellow"
                   width="200" height="150"
                   horizontalCenter="col2:0"
                   verticalCenter="0">
        </mx:Canvas>
    </mx:Canvas>
</s:Application>
I took a shot using Spark components.  The only container layout that seems to allow ConstraintColumns seems to be ConstraintLayout.  Ironically though it doesn't allow you to horizontally center within those columns (horizontalCenter and verticalCenter only good in Basic and Absolute layouts).  Any suggestions on making this happen?
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               backgroundColor="blue">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:SkinnableContainer id="mainContentArea"
             top="100" bottom="100"
             backgroundColor="red">
        <s:layout>
            <s:ConstraintLayout>
                <s:constraintColumns>
                    <s:ConstraintColumn id="col1" width="{width/2}" />
                    <s:ConstraintColumn id="col2" width="{width/2}" />               
                </s:constraintColumns>                   
            </s:ConstraintLayout>
        </s:layout>
        <s:BorderContainer id="greenContainer"
                           backgroundColor="green"
                           width="400" height="300"
                           horizontalCenter="col1:0"
                           verticalCenter="0">
        </s:BorderContainer>   
        <s:BorderContainer id="yellowContainer"
                           backgroundColor="yellow"
                           width="200" height="150"
                           horizontalCenter="col2:0"
                           verticalCenter="0">
        </s:BorderContainer>       
    </s:SkinnableContainer>
</s:Application>

Answer 1

I posted the example earlier in this thread.
The problem is the objects don't stay in one place or stay one size.  They change sides and resize.  Sticking them in groups seems to limit the ability to smoothly transition them to new positions and sizes.
Picture two objects, one left side and one right.  The objects always need to be centered in their side, even as they change size or *switch* sides.  They also need to automatically use all available space on their side while maintaining an aspect ratio (like 4:3, 16:9, etc).  So if the user resizes the browser, aspect ratios must be maintained as the items resize.
You as the user have the option to do the following:
1.  Have the objects switch sides (reverse)
2.  Have the objects resize (left side gets big and right gets small, or the opposite, or have the two size equally)
3.  Have one object disappear and the other take over full screen
4.  Have the other object disappear and the first one take over full screen
These movements are animated with easing transitions.  Centering them within a column is as simple as changing the horizontalCenter position with respect to the column.  How would you do that with groups?