title: Two dynamic width divs in one line: one with ellipsis, second is close to first
body: <p>Suppose, we have a list of groups, and the number of trainees per each group, like:</p>
  
  <pre><code>Math (34)
  Physics (22)
  Lingvo (33)
  ...
  </code></pre>
  
  <p>They're listed in the <strong>JS</strong> grid, and each renderer can be css-styled. Here is the problem: I need to display the list of groups so the numbers of trainees would be right the group name, but when the window is resized (made smaller), the number of trainees would stay on the right side of the column, but the long group name would be truncated with ellipsis, like:</p>
  
  <pre><code>|Math (34)
  |Physics (22)
  |Veerryy l..(18)
  </code></pre>
  
  <p>and even more:</p>
  
  <pre><code>|Math (34)
  |Physics (22)
  |Veerryy..(18)
  </code></pre>
  
  <p>When resized, those two divs (span) should not wrap one below each other. The min width of the grid is known, so eventually there will be a x-scroll.</p>
  
  <p>Once the window size is restored, the group names will be displayed properly and the numbers of trainees will be still right the group name:</p>
  
  <pre><code>|Math (34)
  |Physics (22)
  |Veerryy long group name (18)
  </code></pre>
  
  <p>I expect this might be done with <strong>CSS</strong>, but tried a lot and still no success. I don't want to overload rendering in <strong>JS</strong>, so better stay with <strong>CSS</strong>. Please assist.</p>