title: How can I change two lines of text into one via CSS please?
body: <p>I'd like to ask you  experts a CSS-based question, which I think will probably be too easy for you to answer. I've tried - but failed.</p>
  
  <p><a href="http://codepen.io/fatihturan/pen/iLgub" rel="nofollow">http://codepen.io/fatihturan/pen/iLgub</a></p>
  
  <p>I've seen this pen and really appreciate the effect - though it would be perfect if the text could be on one line, such as this:</p>
  
  <p>Title: Foo</p>
  
  <ul>
  <li>and keeping the hidden scrolling intact.</li>
  </ul>
  
  <p>Thanks!
  Rob</p>
  
  <pre><code>  &lt;div class="badge"&gt;
      &lt;span class="title"&gt;Title:&lt;/span&gt;
      &lt;div&gt;
        &lt;span class="first"&gt;Foo&lt;/span&gt;
        &lt;span class="second"&gt;Bar&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  body {
    background:#fff;
    font:14px "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  
  .badge {
    margin:100px auto;
    width:80px;
    height:40px;
    padding:10px 0px;
    border-radius:4px;
    background-color:#e3e3e3;
    box-shadow:0 1px rgba(255,255,255,.75), inset 0 1px 2px rgba(0,0,0,.1);
    text-align:center;
    color:#949494;
    line-height:14px;
    text-shadow:0 1px 0 #fff;
    div {
      overflow:hidden;
      padding:2px 0;
      height:16px;
    }
    span {
      display:block;
      font-size:18px;
      color:#8b8b8b;
      cursor:default;
    }
    &amp;:hover {
        .first {
          top:-20px;
        }
        .second {
          top:-19px;
        }
    }
  }
  
  .title {
    margin-bottom:5px;
    font-size:12px;
    font-weight:100;
  }
  
  .first, .second {
    position:relative;
    top:0;
    transition:top .1s ease-in;
    -webkit-transition:top .1s ease-in;
    -moz-transition:top .1s ease-in;
  }
  
  .first {
    margin-bottom:5px;
  }
  </code></pre>