title: Resizing span to fill remaining width in a div
body: <p>I currently have the following html structure</p>
  
  <pre><code>&lt;div&gt;
      &lt;span id="a"&gt;
          Some text
      &lt;/span&gt;
      &lt;span id="c"&gt;
          &lt;span id="resizable"&gt;
              Some text...
          &lt;/span&gt;
          &lt;span id="b"&gt;
              &lt;img&gt;
          &lt;/span&gt;
      &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want everything inside the div to be on one row (nothing should be wrapped) and the div should be completely inside a container. The contents of #a and #b should be shown in their entirety but the #resizable span can be resized to adjust for the remaining space. If the text cannot inside it cannot be completely displayed, then the overflow should be replaced with ellipsis.</p>
  
  <p>I'm having a hard time getting everything to fit inside the container. If the text within #resizable is too long the entire div flows outside the container as I can't seem to get #resizable to resize properly.</p>
  
  <p>Anyone have any ideas on how to achieve this?</p>
  
  <p>EDIT</p>
  
  <p>This is the css i have so far</p>
  
  <pre><code>#resizable {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
  }
  .c {
      display: inline-block;
  }
  </code></pre>