title: Inline-block elements within a fixed width container
body: <p>How can I make two elements that are <code>inline-block</code> fit within a fixed width? </p>
  
  <p>I don't necessarily know the width of the first element, and the second, longer, element (with <code>white-space: nowrap</code>) takes the width of the fixed element, so overflows the container. </p>
  
  <pre><code>/---------------------/
  /Label: |Other content/ that just  |
  /       |keeps going a/nd overflows|
  /---------------------/
  </code></pre>
  
  <p><a href="https://jsfiddle.net/Lj8evrqr/" rel="nofollow">JSFiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.fixed-width-container{
      border: 1px red solid;
      width: 200px;
      white-space: nowrap;
  }
  .inline-block-1{
      display: inline-block;
      border: 1px blue solid;
      vertical-align: top;
  }
  .inline-block-2{
      display: inline-block;
      white-space: normal;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="fixed-width-container"&gt;
      &lt;div class="inline-block-1"&gt;Label:&lt;/div&gt;
      &lt;div class="inline-block-2"&gt;Some really long text that is going to go down to the next line&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>