How can I change two lines of text into one via CSS please?

Question

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.

http://codepen.io/fatihturan/pen/iLgub

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:

Title: Foo

• and keeping the hidden scrolling intact.

Thanks! Rob

  <div class="badge">
    <span class="title">Title:</span>
    <div>
      <span class="first">Foo</span>
      <span class="second">Bar</span>
    </div>
  </div>


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;
  }
  &: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;
}

Answer 1

You need to implement -webkit-box to badge class.

Working demo

-webkit-box has been supported by IE9+ , Firefox, Chrome, Safari and Opera.

Answer 2

see my update in link

codeopen

    body {
  background:#fff;
  font:14px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.badge {
  margin:100px auto;
  width:150px;
  height:20px;
  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;
  }
  &:hover {
      .first {
        top:-20px;
      }
      .second {
        top:-19px;
      }
  }
}

.title {
  margin-bottom:5px;
  font-size:12px;
  font-weight:100;
  width:50%;
  float:left;
}

.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;
}

Answer 3

Just use:

display: inline;

instead of

display: block;

on the spans.

P.S. Your code isn't a valid CSS. That is SCSS which has to be compiled into CSS!