CSS overflow to float left

Question

I have a div that contains two lines. Top line is title and bottom line is name.

when the title is short enough, that the name is on the bottom line (left image)

However, when the title is long, I want the overflow to go to the second line and have the name next to it like in right image.

Could someone help me with this?

Here is the html structure:

<div class="container">
   <div class="content_top">
      <span class="content">Something</span>
   </div>
   <div class="name_top">
      <span class="name">Steve</span>
   </div>
</div>

Answer 1

CSS trick. Place the name on the next line or on the same one

I've used the :first-line pseudo-element and the word-spacing property.

If the first line is short, then the name is placed on the next line. If the first line is long, then the name is placed on the same line.

Please check the result:  codepen,   jsfiddle.

/* heart of the matter */
.container:first-line { 
  word-spacing: 240px; /* the width of the container, or more */
} 
.content {
  word-spacing: normal; 
}
.insert {
  margin-right: -11px; /* defined by the normal inter-word space */
}

/* nice look */
.container {
  border: 5px solid black;
  float: left;
  font-family: Helvetica;
  font-size: 20px; 
  font-weight: bold; 
  margin: 0 15px 30px 0;
  min-height: 60px;
  padding: 8px 10px;
  width: 240px;
}
.name {
  color: red;
}

/* little explanation */
.colored-background .content { background-color: lightblue; }
.colored-background .insert  { background-color: orange; }

<div class="container">
  <span class="content">Something</span>
  <span class="insert">&nbsp;</span>
  <span class="name">Steve</span>
</div>
<div class="container">
  <span class="content">Something Something Else</span>
  <span class="insert">&nbsp;</span>
  <span class="name">Steve</span>
</div>

<div style="clear: left;"></div>

<div class="container colored-background">
  <span class="content">Something</span>
  <span class="insert">&nbsp;</span>
  <span class="name">Steve</span>
</div>
<div class="container colored-background">
  <span class="content">Something Something Else</span>
  <span class="insert">&nbsp;</span>
  <span class="name">Steve</span>
</div>