Flex 3 Constraint-based Layout problem

Question

I am attempting to reproduce a foreign language quiz in Flex. Since I'm new I can't post an image yet, but picture a box on a page with a paragraph of text inside of it. At parts within the paragraph there are drop-down boxes for users to select a particular word or phrase from a few different options. There's a "Check Answers" button at the bottom which users can click to see if their answers were correct.

The elements would be dynamically loaded from an XML file.

My big concern right now is getting the elements to constrain themselves with in a given width (like 300px). Any ideas? I have some code I'm working on right now:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"   
horizontalScrollPolicy="off" verticalScrollPolicy="off" 
creationComplete="init()" >

<mx:HTTPService id="GetExt" url="data/testData.xml" result="GetExtResultHandler(event);" resultFormat="e4x"  />


<mx:Script>
<![CDATA[
 import mx.containers.VBox;
 import mx.controls.Label;
  import mx.containers.HBox;
  import mx.rpc.events.ResultEvent;
  import mx.controls.Alert;
  import mx.collections.ArrayCollection;
  import mx.events.ListEvent;
  import mx.collections.XMLListCollection;

  //This variable hasn't been used yet.
  private var childCount:int = 0;

  //Holds the elements to be pushed to the layout.
  private var currentHolder:HBox = new HBox();



  //These two variables are to set up for the httpservice 
  [Bindable]
  private var quizHold:XMLList = new XMLList();
  [Bindable]
  private var quizElements:XMLListCollection = new XMLListCollection();

 [Bindable]
 public var labl:Label = new Label();

            //This is test code.
 private function tester():void {
  labl.text = "Hello there. This is English.";
  labl.validateNow();
  Alert.show(String(labl.width));
 }

 private function init():void {
  GetExt.send();
  tester();
 }
  //assigning e4x from httpservice to XMLList, then to XMLListCollection
  private function GetExtResultHandler(event:ResultEvent):void {
   quizHold = event.result.mainTag;

   quizElements.source = quizHold;
   loadQuiz();


  }



  //currently set to load with the quizlayout container
  private function loadQuiz():void {

   var TotalWidth:int = 0;


   Alert.show( ('This is the width ' + quizLayout.width));

   //pull quiz elements out and get them into a label.
   for each(var item:XML in quizHold.element) {
    var loadr:Label = new Label();
    loadr.text = item.text();
    Alert.show(String(loadr.textWidth) );

    //if the element runs over the specified length, create and new HBox and assign element to it
    if (item.length() + TotalWidth >= quizLayout.width) {
     var newBox:HBox = new HBox();


     newBox.addChild(loadr);
     quizLayout.addChild(newBox);
     TotalWidth = 0;
    }

    //otherwise add the element to the quiz and add the width to a running counter (TotalWidth)
    else {
    loadr.text += item.text();
    TotalWidth += loadr.width;

    test.addChild(loadr);
    }



   } 


   }


]]>



</mx:Script>


   <mx:Panel id="quizLayout" verticalAlign="top" width="300" horizontalScrollPolicy="off">
    <mx:VBox id="test" paddingLeft="20" paddingRight="20" borderThickness="5" borderColor="#3214ab" borderStyle="inset">

    </mx:VBox>

   </mx:Panel> 


</mx:Application>

Any help anyone can give me would be appreciated.