Make text wrap when it meets sibling span

Question

Basically, I have two span elements: one pulled left, the second pulled right.

The one on the left is bigger, the one on the right is supposed to just show a number.

What I am trying to achieve is - while resizing the window, make the left span line break when it meets the right span and center the right span vertically when it happens (since the container div will probably gain some additional height). Any ideas?

Here is the code: http://www.jsfiddle.net/1db4trxo/5/

.pricing {
  width: 100%;
  background: #333;
  color: #fff;
  overflow: hidden;
}
.left {
  float: left;
  margin-left: 5px;
}
.right {
  float: right;
  margin-right: 5px;
  color: #f6c42b;
}

<div class="pricing">
  <span class="left"> Wow, there's kinda lot of text here </span>
  <span class="right"> Just a price </span>
</div>

Answer 1

Flexbox can do this, and you don't need floats. In fact, floats are ignored in a flex container.

Revised Fiddle

.pricing {
    display: flex;                    /* establish flex container */
    justify-content: space-between;   /* align children at opposite ends */
    background: #333;
    color: #fff;
}

.left {
    margin-left: 5px;
}

.right {
    white-space: nowrap;             /* prevent text from wrapping */
    align-self: center;              /* center element vertically */
    margin-right: 5px;
    color: #f6c42b;
}

<div class="pricing">
  <span class="left"> Wow, there's kinda lot of text here </span>
  <span class="right"> Just a price </span>
</div>