Setting layout.sizePane("west") after changing the width of layout div

Question

Am creating layout for a container div, which has two divs inside, one is west pane and another in center pane, now am changing the width of the container div and then trying to set the "west pane" size to fill the entire container div, its not working as expected, this is what i tried,

<div  id="ResizeDiv" class="ui-layout-pane" style="width:700px;height:500px; background-color:red;">
<div class="ui-layout-west " style="background-color:yellow;">West</div>
<div class="ui-layout-center" style="background-color:pink;" >center</div>
</div>

$(document).ready(function () {
                var myLayout = $('#ResizeDiv').layout({ applyDefaultStyles: true, resize: true });
                $("#changeWidth").click(function () {
                    $("#ResizeDiv").css("width","900px");
                });
                $("#westPaneWidth").click(function () {
                    myLayout.sizePane("west", 800);
                });
            });

Here is the working fiddle sample. First click on "Change Container Width" button, you can see container width changes with red background, then click on "Change West Pane Width" button, now west pane supposed to change it width and fill the container, but its not working like that, please help me with this.