title: CSS3 Flip Card with Automatic Height
body: <p>I'm using a tutorial to create a flip card effect using CSS3 and jQuery and I'm having issues getting the height to adjust to the content length while having it still flip on the center horizontal.</p>
  
  <p><strong><a href="http://jsfiddle.net/GDdtS/1100/" rel="noreferrer">FIDDLE.</a></strong></p>
  
  <p>Code:</p>
  
  <pre><code>&lt;div class="flip"&gt; 
      &lt;div class="card"&gt; 
          &lt;div class="face front"&gt; 
              Front&lt;br&gt; Other text.&lt;br&gt; Other text.&lt;br&gt; Other text.&lt;br&gt; Other text.
          &lt;/div&gt; 
  
          &lt;div class="face back"&gt; 
              Back
          &lt;/div&gt; 
      &lt;/div&gt; 
  &lt;/div&gt; 
  </code></pre>
  
  <hr>
  
  <pre><code>body {
   background: #ccc;   
  }
  .flip {
    -webkit-perspective: 800;
     width: 400px;
     height: 200px;
      position: relative;
      margin: 50px auto;
  }
  .flip .card.flipped {
    -webkit-transform: rotatex(-180deg);
  }
  .flip .card {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.5s;
  }
  .flip .card .face {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden ;
    z-index: 2;
      font-family: Georgia;
      font-size: 3em;
      text-align: center;
  }
  .flip .card .front {
    position: absolute;
    z-index: 1;
      background: black;
      color: white;
      cursor: pointer;
  }
  .flip .card .back {
    -webkit-transform: rotatex(-180deg);
      background: blue;
      background: white;
      color: black;
      cursor: pointer;
  }​
  </code></pre>
  
  <hr>
  
  <pre><code>$('.flip').click(function(){
      $(this).find('.card').addClass('flipped').mouseleave(function(){
          $(this).removeClass('flipped');
      });
      return false;
  });​
  </code></pre>
  
  <p>​</p>