title: Set width of a span based on width of another element with pure css
body: <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div id="setter"&gt;
      &lt;span&gt;some variable content&lt;/span&gt;  
    &lt;/div&gt;
  
    &lt;div class="wrap"&gt;
      &lt;span&gt;
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum    
      &lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.container {
    max-width: 200px;
  }
  
  .wrap {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;  
  }
  </code></pre>
  
  <p><strong>The case:</strong></p>
  
  <p>I need to set the width of a span inside <code>.wrap</code> class based on the width of a span inside <code>#setter</code> div dynamically. As you can see in css I'm using <code>ellipsis</code> overflow on the second div. The <code>setter</code> div content length is going to vary. So the goal is to make the <code>lorem ipsum</code> text be not wider than the content of the first div.</p>
  
  <p>Codepen: <a href="http://codepen.io/jacek213/pen/pbPkmQ" rel="noreferrer">http://codepen.io/jacek213/pen/pbPkmQ</a></p>
  
  <p>I want to achieve this with pure css, is that possible? If not, an angular-friendly solution in js (jquery usage is ok) is welcome, however I need it to be efficient because I'm going to display a large number of records built with this structure at once.</p>