title: How do I top align two areas in an ExtJS table layout?
body: <p>The ExtJS code below creates two regions to the left and right of each other, like this:</p>
  
  <p><img src="https://i.stack.imgur.com/ScsO2.png" alt="enter image description here"></p>
  
  <p><strong>What do I have to change to this code so that the two areas are top aligned?</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      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);
  
  &lt;/script&gt;
  </code></pre>