title: jQuery UI resizable changes height when resizing width
body: <p>I have a very simple DIV element that I'm trying to resize and drag horizontally. It works fine but the height of the DIV element is also changed by jQuery UI. I don't understand why.</p>
  
  <p>Anyone an idea?</p>
  
  <p>JS code:</p>
  
  <pre>
  $('.task')
      .draggable({
          axis: 'x'
      })
      .resizable({
          containment: 'parent',
          handles: 'e, w'
      });
  </pre>
  
  <p>HTML code:</p>
  
  <pre>
  &lt;ul&gt;
    &lt;li&gt;
      &lt;div class="task status-green"&gt;
        &lt;span class="handle-move"&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </pre>
  
  <p>CSS code:</p>
  
  <pre>
  li {
    height: 20px;
    line-height: 20px;
    list-style: none;
  }
  
  .task {
    height: 16px;
    margin-top: 2px;
    position: relative;
  }
  
  .task span {
    display: block;
    height: 16px;
    position: absolute;
    z-index: 10;
  }
  
  .task .handle-move {
    bottom: 0;
    cursor: move;
    left: 10px;
    right: 10px;
    top: 0;
    z-index:1;
  }
  
  .task .ui-resizable-handle {
    background-color: pink;
    cursor: e-resize;
    height: 16px;
    position: absolute;
    width: 10px;
  }
  
  .task .ui-resizable-w {
    left: 0;
  }
  
  .task .ui-resizable-e {
    right: 0;
  }
  
  .status-green {
    background-color: green;
  }
  </pre>