title: Sliding down new div below another div
body: <p>I want to have a new/hidden div slide down from below another div. The idea is that I have a input field and a add-button. When the add-button is clicked, more form elements are revealed (slide out below). The form-part of this is not important for my problem, so I just let the first div be the text "hover me to reveal new div" and the new sliding-down-div be some random text.</p>
  
  <p>So far I have this html:</p>
  
  <pre><code>&lt;div class="one"&gt;Hover me to reveal new div&lt;/div&gt;
  &lt;div class="two"&gt;I slid!&lt;br&gt;And I am higher than the div before me...&lt;/div&gt;    
  </code></pre>
  
  <p>And this css:</p>
  
  <pre><code>.one {
      position: relative;
      top: 100px;
      background-color: lightblue;
      z-index: 1;
  }
  
  .two {
      position: absolute;
      top: 60px;
      background-color: yellow;
      z-index: -1;
      -webkit-transition: top 1s;
      -moz-transition: top 1s;
      -o-transition: top 1s;
      transition: top 1s;
      }
  
  .one:hover + .two {
      top: 100px;
  }
  </code></pre>
  
  <p>See jsfiddle: <a href="http://jsfiddle.net/8ZFMJ/" rel="nofollow">http://jsfiddle.net/8ZFMJ/</a></p>
  
  <p>This kind of works. But the second div is higher than the first div, so it is visible above the first div, I do not want that. How can I make it slide down the first div in the way that I want? If I in the process end up not having the first div to have to know the position of the first div, that would be good too...</p>