I use Ext 3.4.1.1

Fiddle:
https://fiddle.sencha.com/#view/editor&fiddle/3r8p

I have two simple panels inside hbox layout. I want both of them to be resizable (so both are resized at the same time when on or the other is resized, hence they are side by side).

Resizable panel looks like this:

{
                        xtype: 'panel',
                        title: 'Navigation',
                        flex: 2,
                        resizable: true,
                        hidden: false,
                        listeners: {
                            render: function (p) {
                                new Ext.Resizable(p.getEl(), {
                                    handles: 'all',
                                    pinned: true,
                                    transparent: false,
                                    resizeElement: function () {
                                        var box = this.proxy.getBox();
                                        p.updateBox(box);
                                        if (p.layout) {
                                            p.doLayout();
                                        }
                                        return box;
                                    }
                                });
                            }
                        }
                    }

Here comes the problem – adding Ext.Resizable to both of them makes second panel become invisible, it disappears from the form. If I leave Ext.Resizable only on one panel, then both are visible, but they can not be resized at the same time (only one is resizable and overlapps with another).
I can use some other layout (then they are both visible) than hbox, but then I have the problem how to stretch both forms 100% and put them side by side.

Is it possible to make both panels resizable inside hbox layout?