Set width of a span based on width of another element with pure css
<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>