title: How to fixed heading into two lines despite content being only one line
body: <p>How can I fixed my link heading into two lines despite the text being only one line?</p>
  
  <p><a href="http://codepen.io/cusx/full/wamJJP/" rel="nofollow">CodePen Link to Problem</a></p>
  
  <p>When the heading is only one line, the position of the <strong><em>Comment and Like</em></strong> button becomes inconsistent, as shown <a href="http://i.imgur.com/zDcFg5P.png" rel="nofollow">HERE</a> .</p>
  
  <p>I tried using floats to no avail. Then I tried setting the position of the <em>div.info</em> relative and having my comment and like button to absolute so that I can take them out of the document flow, but somehow, the comment and like button is still following the document flow.</p>
  
  <pre><code>.info
      height: 20em
      position: relative
  
  .comment
      position: absolute
      margin-top: -1.5em
      font-size: 1.2em
      float: left
      padding-left: 3em
      a
          text-decoration: none
          color: white
          &amp;:visited
              color: white
              font-weight: 700
  .like
      margin-top: -1.5em
      font-size: 1.2em
      position: absolute
      top: 0
      bottom: 20px
      right: 20px
      // float: right
      padding-right: 3em
  </code></pre>