title: How to right align a div within a table cell without wrapping?
body: <p>Peculiar requirements that I couldn't come up with a proper solution for:</p>
  
  <p>For content in a table cell with a <code>&lt;div&gt;</code> appended, how can I right align that <code>&lt;div&gt;</code> while preventing the whole cell from wrapping?</p>
  
  <p>Here's what I have for consideration: <a href="https://jsfiddle.net/c01y63k1/" rel="nofollow">https://jsfiddle.net/c01y63k1/</a></p>
  
  
  
  <pre class="lang-css prettyprint-override"><code>table td:first-child {
    white-space: nowrap;
  }
  
  table td:first-child &gt; div {
    margin-left: 1em;
    display: inline-block;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h2&gt;This works:&lt;/h2&gt;
  &lt;table style="width: 200px"&gt;
    &lt;tr&gt;
      &lt;td&gt;
        Test test
        &lt;div&gt;
          float!
        &lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;Div with a lot of content&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;h2&gt;But...&lt;/h2&gt;
  &lt;p&gt;
  Now my 'float!' is not right-aligned when there's extra space in the cell:
  &lt;/p&gt;
  
  &lt;table style="width: 500px"&gt;
    &lt;tr&gt;
      &lt;td&gt;
        Test test
        &lt;div&gt;
          float!
        &lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;Div with a lot of content&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>As you can see, the above will work when the table cell's automatic width would be less than that of the content's unwrapped width. However, when the table cell's width is larger than that of the content, the <code>div</code> will not be right aligned (because it isn't).</p>
  
  <p>Applying <code>float: right</code> on the <code>div</code> will work in a reverse fashion to the above cases. See that here: <a href="https://jsfiddle.net/ycutor3t/" rel="nofollow">https://jsfiddle.net/ycutor3t/</a></p>
  
  
  
  <pre class="lang-css prettyprint-override"><code>table td:first-child {
    white-space: nowrap;
  }
  
  table td:first-child &gt; div {
    margin-left: 1em;
    display: inline-block;
    float: right
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h2&gt;This does not work:&lt;/h2&gt;
  &lt;table style="width: 200px"&gt;
    &lt;tr&gt;
      &lt;td&gt;
        Test test
        &lt;div&gt;
          float!
        &lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;Div with a lot of content&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;h2&gt;But... this does!&lt;/h2&gt;
  &lt;p&gt;
  Now my 'float!' is right-aligned when there's extra space in the cell:
  &lt;/p&gt;
  
  &lt;table style="width: 500px"&gt;
    &lt;tr&gt;
      &lt;td&gt;
        Test test
        &lt;div&gt;
          float!
        &lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;Div with a lot of content&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>