Resizing content panes

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dijit/themes/claro/claro.css">
<div id="container">
</div>

CSS

body, html, #container { width : 100%; height : 100%; margin : 0; padding : 0; }

#pane1 { background : red; }
#pane2 { background : green; width : 200px; }
#toolbar { height : 50px; }

JavaScript

require([
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dijit/form/Button",
    "dojo/domReady!"
], function(BorderContainer, ContentPane, Button){
    var container = new BorderContainer({
        design : "headline",
        gutters : false
    }, "container");
    
    var pane1 = new ContentPane({
        region : "center",
        id : "pane1"
    });
    
    var pane2 = new ContentPane({
        region : "right",
        id : "pane2"
        
    });
    
    var toolbar = new ContentPane({
        region : "bottom",
        id : "toolbar"
    });
    
    var btn = new Button({
        label : "Change right side",
        onClick : function(){
            pane2.resize({ w :  Math.random() * pane2.get("w") });
            container.layout();
        }
    });
    
    toolbar.addChild(btn);
    container.addChild(pane1);
    container.addChild(pane2);
    container.addChild(toolbar);
    container.startup();
    
});