Trying to get two vbox next to each other

Question

I have two vbox that I want right next to each other. However, only the first one is showing up. Why is this and how do I change it? Here is my code

  layout: 'fit',
  title: 'Avail Requests Details',
  minWidth: 1000,
  minHeight: 600,
  width: 1174,
  height: 600,
  autoShow: true,
  //listeners: {
  //    beforedestroy: 'onBeforeDestroy'
  //},

  items: [{
    xtype: 'form',
    reference: 'viewForm',
    bodyPadding: 10,
    defaults: {
      xtype: 'container',
      height: 25,
      layout: {
        type: 'column'
      },
      defaults: {
        columnWidth: 0.3,
        labelWidth: 140
      }
    },
    layout: {
      type: 'vbox',
    },
    items: [{
      xtype: 'displayfield',
      fieldLabel: 'CHANNEL',
      name: 'Channel'
    },
    {
      xtype: 'displayfield',
      fieldLabel: 'ADVERTISER',
      name: 'AdvertiserName'
    },
    {
      xtype: 'displayfield',
      fieldLabel: 'DEMO',
      name: 'Demo'
    },
    {
      xtype: 'displayfield',
      fieldLabel: 'COMMENTS',
      name: 'comments'
    }],
    layout: {
      type: 'vbox',
    },
    items: [{
      xtype: 'displayfield',
      fieldLabel: 'CHANNEL',
      name: 'Channel'
    },
    {
      xtype: 'displayfield',
      fieldLabel: 'ADVERTISER',
      name: 'AdvertiserName'
    },
    {
      xtype: 'displayfield',
      fieldLabel: 'DEMO',
      name: 'Demo'
    },
    {
      xtype: 'displayfield',
      fieldLabel: 'COMMENTS',
      name: 'comments'
    }]
  }]
});

Answer 1

You have two items definition in your form, so second just overrite first, not adding new one. Also you have to use hbox layour for parent component.

I updated your code, check this fiddle.