title: Text overflow ellipsis on div with multiple span
body: <p>I have following structure in dropdown suggestions for my autocomplete plugin</p>
  
  <pre><code>&lt;div&gt;
      &lt;svg&gt;//some things here&lt;/svg&gt;
      &lt;span&gt;My long text&lt;/span&gt;
      &lt;span&gt;Some short text&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The div has following CSS properties -</p>
  
  <pre><code>display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%
  </code></pre>
  
  <p>The span has following properties -</p>
  
  <pre><code>float: left;
  </code></pre>
  
  <p>I am unable to understand where it went wrong and have tried almost all SO solutions answered in similar problems till date. A desperate callout!</p>
  
  <p>Update: <a href="http://codepen.io/shreeshkatyayan/pen/wzPYvO" rel="nofollow">http://codepen.io/shreeshkatyayan/pen/wzPYvO</a> CSS structure - non-working for obvious reasons.</p>