Dynamic positioning of text area and text input in flex

I need to create a fill in the blanks question where the question text will be loaded dynamically through xml. I don't know the length of the question. I have to place a text area for question and text input for answer. The positioning of these controls should be aligned based on the input.

Any tips on how to achieve this using flex air application?

Check this jQuery plugin. It exactly does what you are looking for.

JEditable If you are not inclined towards using the plugin, then try the code below:

<div>
    <div>
        <label class="editable">Name</label>
        <input class="editable" type="text" name="name" style="display:none"/>
    </div>
    <div>
        <label class="editable">Type</label>
        <input class="editable" type="text" name="type" style="display:none"/>
    </div>
    <div>
        <a class="edit" href="#">Edit</a>
    </div>
</div> 
<script type="text/javascript">
    $(function(){
        $(".edit").click(function(){
            var $this = $(this);
            var text = $this.text();
            if(text=="Edit"){
                $this.text("Cancel");
            }
                        else{
                             $this.text("Edit");
                        }
            $(".editable").toggle();
        });

        $("input.editable").change(function(){
            $(this).prev().text($(this).text());

        });
    });
</script>

To bind the click event handler to the anchor element use the live function of jQuery. e.g:

$("a.ff-save").live("click", function (){         
 alert("ok");     
});