title: CSS transition width to the left
body: <p>I'm trying to take a div that has a span that is always displayed, and a paragraph that is underneath it displayed when hovering over the div.  What I have works, except I want some of those div's to transition the width so they transition down and then left.  The default (and I'm guessing browser default) seems to always be down and then right.</p>
  
  <p>Link to fiddle and code below.  There are two red box div's with title text that when you hover over them, the width expands and the paragraph below it is displayed.  What I'm looking to do is make the bottom right div (Title Here2 text) transition to the left.  So the red background would not transition to the right at all.</p>
  
  <p>NOTE:  The position of the div's on the page cannot change.</p>
  
  <p><a href="http://jsfiddle.net/szfiddle/qP5fW/1/" rel="nofollow">http://jsfiddle.net/szfiddle/qP5fW/1/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="hpBox"&gt;
      &lt;span&gt;Title Here&lt;/span&gt;
      &lt;p&gt;Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="hpBox hpBox2"&gt;
      &lt;span&gt;Title Here2&lt;/span&gt;
      &lt;p&gt;Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.hpBox {
      display: inline-block;
      padding: 10px;
      background: red;
      -webkit-transition: 1s linear;
      transition: 1s linear;
      max-width:200px;
      max-height:22px;
      position:absolute;
  }
  .hpBox p {
      max-height: 0;
      max-width: 0;
      overflow: hidden;
      -webkit-transition: 2s linear;
      transition: 2s linear;
  }
  .hpBox:hover {
      max-width:400px;
      max-height:200px;
  }
  .hpBox:hover p {
      max-height: 200px;
      max-width: 400px;
  }
  .hpBox2 {
    left:60%;
    top:250px;
  }
  </code></pre>