title: How to force element to stay on the same line as last word previous element?
body: <p>This is similar to <a href="https://stackoverflow.com/questions/10008395/how-can-i-force-two-elements-to-always-stay-on-the-same-line-in-a-td">How can I force two elements to always stay on the same line in a &lt;td&gt;</a>, but I would like the element only to line up with the -last word- of the previous element.</p>
  
  <h2>Example</h2>
  
  <pre><code>&lt;th&gt;
    {dynamic text}
    &lt;i&gt;{static icon}&lt;/i&gt;
  &lt;/th&gt;
  </code></pre>
  
  <p>Given sufficient room, we would get:</p>
  
  <pre><code>dynamic text here{icon}
  </code></pre>
  
  <p>If there isn't enough room, it would wrap:</p>
  
  <pre><code>dynamic text
  here{icon}
  </code></pre>
  
  <p>But it should never put the {icon} on it's own line like this:</p>
  
  <pre><code>some text
  here
  {icon}
  </code></pre>
  
  <p>I would like the static icon to stick to the last word of the dynamic text.</p>