How to remove double border from adjacent panels?

[Just-Boris]

I have two ajacent panels, arranged by hbox layout

Ext.onReady(function(){  
    var panel = Ext.widget('viewport', {
      layout: {
          type: 'vbox',
          align: 'stretch'
      },
      items: [{
         xtype: 'panel',
         flex: 1,
        html: 'first panel'
       }, {
         xtype: 'panel',
         border: '0 1 1 1',
         flex: 1,
         html: 'second panel'
      }]
    });
}); 

I want to remove double border between panels.
I try to set border: '0 1 1 1' to second panel, but it had no effect.
Setting style: {borderWidth: '0 1px 1px 1px'} didn't help too.
Set style: {borderWidth: '0 1px 1px 1px'} helps, until there is no toolbars.
If I decide to add topbar to second panel, between toolbar and panel body will hasn't border, but between toolbar and first panel appear double border again.
How I can describe boundaries so that between all elements boundary will be single?
Here is my codepen example: http://codepen.io/Just-Boris/pen/bdsrn

[mitchellsimoens]

First thought is it doesn't seem like you need to use panel there but can just use component (or container if you need child items but no title)

[Just-Boris]

I helps me in this case, but what would I do if I need to create more difficult interface?
http://codepen.io/Just-Boris/pen/fDnjK
In this case first panel become grid, and second panel has title.
There is are needed panels and problem still remains.