Text doesn't wrap, breaks layout instead

Question

I have a collection of divs as rows that can be variable width as they are inside a resizable container. The div contains text that I want to have a hanging indent. This works fine except in this example the first line is pushed underneath the red label when the width is too low.

When .wrapper is 450px everything is displayed properly. When it's 250px you can see how things break. I always want the longtextthatwraps span to be on the same line as the red label.

Here's a live example/fiddle and the source is as follows:

HMTL (there is no whitespace between .prefix and .part but for readability...):

<div class="wrapper">
  <div class="padded excludes">
    <div class="parts first">
      <span class="prefix">Quisques:&nbsp;</span>
      <span class="segment level-0">
        <span class="part text">longtextthatwraps incorrectly (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span>
      </span>
    </div>
    <div class="parts">
      <span class="segment level-0">
        <span class="part text">consectetur adipiscing  (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span>
      </span>
    </div>
    <div class="parts"> 
      <span class="segment level-0">
        <span class="part text">quisque non mauris sed:</span>
      </span>
    </div>
    <div class="parts"> 
      <span class="segment level-1">
        <span class="part list-item">hendrerit (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span>
      </span>
    </div>
    <div class="parts"> 
      <span class="segment level-1">
        <span class="part list-item">non mauris sed (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span>
      </span>
    </div>
    <div class="parts"> 
      <span class="segment level-1">
        <span class="part list-item">lorem ipsum dolor (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span>
      </span>
    </div>
  </div>
</div>

CSS:

.wrapper {
    width: 250px;
    background: #c3dff5;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
}
.padded {
    padding-left: 20px;
}
.parts {
    padding-left: 80px;
}
.parts.first {
    padding-left: 0;
}
.prefix {
    color: #D12;
    font-weight: bold;
    min-width: 80px;
    display: inline-block;
}
.level-0,.level-1 {
    display: inline-block;
    padding-left: 5px;
    text-indent: -5px;
    outline: 1px dotted #f0f;
}
.level-1 {
    padding-left: 20px;
}

Help appreciated

Answer 1

Hmmm, I believe I have a CSS solution to your problem, though I'm sure there are other ways out there to get the behaviour you're looking for.

For .prefix, I gave the style:

.prefix {
    display: table-cell;
}

And then I added another definition:

.parts.first .level-0 {
    display:table-cell;
}

I hope this is what you're looking for! Here's the updated JSFiddle to show you what it results in. If this isn't your objective, please let me know and I'll be happy to help you further!