当左侧扩展时，防止右侧div下降

Question

我有两个我希望并肩的div。左边的div可以在jquery-ui resizable函数的帮助下展开。当我在某个点之后展开左侧div时，右侧的下方会下降。但我希望水平滚动条会出现。我该怎么办才能避免这种情况？这是HTML，CSS和有助于扩展左div的脚本。

HTML：

<div class="left">
    <h2>Left DIV</h2>
</div>
<div class="right">
        <h2>Right DIV</h2>
</div>

CSS：

  

div.left {       向左飘浮;       宽度：100px;
      身高：680px;       border-right：5px solid＃e7e8e1;       白色空间：nowrap;       z-index：-1;       背景色：绿色; }

     

div.right {       向左飘浮;       padding-left：5px;       背景：海军;       宽度：300像素;        }

使用Javascript：

$(document).ready(function () {
    $('div.left').resizable({
       handles: "e", minWidth: 100, maxWidth: 270});}
);

这是jsfiddle