title: Make a droppable div dynamically expand when i drop an element into it
body: <p>When I drag the question1 &amp; question2 into questionslots i want the questionSlots div to expand its size dynamically when the second question is dropped into it.
  i.e. both the questions should be accomadated and visible in when dropped in the questionSlots.</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div id="questionsHolder"&gt;
      &lt;div id="question1" class="question"&gt;
          1. This is a random question.
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="questionsHolder1"&gt;
      &lt;div id="question2" class="question1"&gt;
          2. This is a random question.
      &lt;/div&gt;
  &lt;/div&gt;
   &lt;br&gt;
       &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
   &lt;div id="questionSlots"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.question {
    width: 500px;
    height: 50px;
    margin-top: 25px;
    background: #ebedf2;
    border: 1px solid #333;
    clear: both;
    text-align: center;
    z-index: 200;
  }
  .question1 {
    width: 500px;
    height: 50px;
    margin-top: 25px;
    background: #ebedf2;
    border: 1px solid #333;
    clear: both;
    text-align: center;
    z-index: 200;
  }
  
  #questionSlots div {
    /*margin-top: 25px;*/
    border-width: 3px;
    border-style: dashed;
    width: 496px;
    height: 46px;
    background: #ddf;
      overflow:hidden;
  }
  
  #questionsHolder{
    border-width: 3px;
    border-style: dashed;
    width: 496px;
    /*height: 46px;*/
    background: grey;
  }
  #questionsHolder1{
    border-width: 3px;
    border-style: dashed;
    width: 496px;
    /*height: 46px;*/
    background: grey;
  }
  
  #questionSlots .question.hovered {
    background: green;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$( init );
  
  function init() {
      // Create droppable
              $('&lt;div id="slot1"&gt;&lt;/div&gt;').appendTo( '#questionSlots' ).droppable( {
                accept: '#questionsHolder div,#questionsHolder1 div',
  
                hoverClass: 'hovered',
                  drop:function(event, ui){
                      ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
                  }
              } );
  
      $('#questionsHolder').droppable( {
                //accept: '#slot1 div',
                hoverClass: 'ui-state-highlight',
                   drop:function(event, ui){
                      ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
                  }  
  
              } );
  
      // Make question draggable
          $("#question1").draggable( {
              cursor: 'move',
              //snap: '#content',
              revert: 'invalid'
              } );
                // Make question draggable
          $("#question2").draggable( {
              cursor: 'move',
              //snap: '#content',
              revert: 'invalid'
              } );
  
      /*function handleQuestionDrop( event, ui ) {
          // Make sure no more questions get dropped at droppable
          // position it directly on top of the slot
          $(this).droppable({ accept: ('#' + $(ui.draggable).attr('id') ) });
          ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
          ui.draggable.draggable( 'option', 'revert', false );
  
      }*/
      }
  </code></pre>
  
  <p>The js fiddle : <a href="http://jsfiddle.net/6zGLk/14/" rel="nofollow noreferrer">http://jsfiddle.net/6zGLk/14/</a></p>
  
  <p>It would be better if you could help me by editing the js fiddle code and forward your link.</p>
  
  <p>Thank you in advance.</p>