title: Float H2 - Need to push text below
body: <p>I need to push the text next to the H2 below it. Not sure why I cant work this out but any help would be great. </p>
  
  <p>Note: You are looking at the left side.</p>
  
  <p><a href="http://jsfiddle.net/Ruddy/3kzGg/3/" rel="nofollow">Fiddle Here</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code> &lt;div class="item"&gt;
              &lt;h2&gt;Item 1&lt;/h2&gt;&lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. &lt;/span&gt;
              &lt;div class="button"&gt;Button&lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.item {
      height: 60px;
      width: 98%;
      border: #000000 solid 1px;
      margin-bottom: 10px;
      padding: 5px;
  }
  
  .item span {
      font-size: 10px;
  }
  
  h2 {
      text-align: left;
      font-size: 14px;
      margin: 0;
      float: left;
  }
  
  .button {
      width: 50px;
      height: 98%;
      border: #000000 solid 1px;
      background: gray;
      float: right;
  }
  </code></pre>
  
  <p>I have tried to float the text, change the display even just margin it down but I would like a good way to do this. Any help would be great, cheers all!</p>