Как мне выровнять две области сверху в макете таблицы ExtJS?

Приведенный ниже код ExtJS создает две области слева и справа друг от друга, например:

Что мне нужно изменить в этом коде, чтобы эти две области выровнены по верхнему краю?

<script type="text/javascript">

    var template_topbottom_top = new Ext.Panel({
        frame: false,
        border: false,
        header: false,
        items: []
    });

    var template_topbottom_bottom = new Ext.Panel({
        frame: false,
        border: false,
        header: false,
        items: []
    });    

    var template_topbottom = new Ext.Panel({
        id:'template_topbottom',
        baseCls:'x-plain',
        renderTo: Ext.getBody(),
        layout:'table',
        layoutConfig: {columns:2},
        defaults: {
            frame:true,
            style: 'margin: 10px 0 0 10px; vertical-align: top' //doesn't work
        },
        items:[{
                width: 210,
                height: 300,
                frame: false,
                border: true,
                header: false,
                items: [template_topbottom_top]
            },{
                width: 1210,
                height: 200,
                frame: false,
                border: true,
                header: false,
                items: [template_topbottom_bottom]
            }
        ]
    });

    replaceComponentContent(targetRegion, template_topbottom, true);

</script>