align / css / inline / white-space

Alinha elementos embutidos à parte, sem nova linha

DEMO
Live demo

HTML

<html>
     <body>
        <a href="#" class="foo">
            <span>hello</span>
            <span>xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx </span>
        </a>
    </body>
</html>

CSS

.foo {
  width: 300px;
  white-space: nowrap;
  display: block;
  vertical-align: top;
  text-decoration: none;
  border: 1px solid #ccc;

}    

span {
  display: inline-block;
  white-space: normal;
  vertical-align: top;
  margin: 10px;
}