title: TD with [white-space:no-wrap] is not working as expected?
body: <p>I have a table : </p>
  
  <p><img src="https://i.stack.imgur.com/6fRMj.jpg" alt="enter image description here"></p>
  
  <p>please look at the right TD.</p>
  
  <p>the yellow div should have its height (mandatory). and I need to vertical align the <code>checkbox</code>+<code>SPAN</code></p>
  
  <p>So I put both of them as : <code>float:left</code> and played with <code>margin-top</code>.</p>
  
  <p>But When I reduce the browser width , the <code>SPAN</code> is going down : </p>
  
  <p><img src="https://i.stack.imgur.com/NQDI5.jpg" alt="enter image description here"></p>
  
  <p><em>I already put no-wrap.</em></p>
  
  <p>I don't care that the text (td#2 ) will be wrapped I just need that the <code>check-box</code> +<code>span</code> will be together  - always.<br>
  and I can't use a <code>width</code> on a wrapper div  cause the <code>Yes</code> here is in English but it's a multilanguage site. So i need the text to be fit in as its original length.</p>
  
  <p>What can I do so the both elements wont be wrapped ? </p>
  
  <p>here is the <strike><a href="http://jsbin.com/oquniq/1/edit" rel="nofollow noreferrer">jsbin</a></strike>. <a href="http://jsbin.com/oquniq/8/edit" rel="nofollow noreferrer"><strong>Here it is</strong></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>td{
    border:solid 1px green;
  }
  
  .myCheck{
    float:left;
    margin-top:16px;
  }
  
  
  .mySpan{
    float:left;
    margin-top:12px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table style='width:100%;' cellspacing=0 cellpadding=0&gt;
    &lt;tr&gt;
      &lt;td&gt;
        1
      &lt;/td&gt;
      &lt;td&gt;Lorem ipsum dolor sit amet, consectetur adipisicing tempor incididunt ut labore et 
      &lt;/td&gt;
      &lt;td style='white-space:nowrap;'&gt;
        &lt;div style='white-space:nowrap; height:50px;background-color:yellow;float:left;'&gt;
          &lt;input type='checkbox' class='myCheck' /&gt;
          &lt;span  class='mySpan'&gt;Yes&lt;/span&gt;
        &lt;/div&gt;
      &lt;/td&gt;
  
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and here is the problem : </p>
  
  <p><img src="https://i.stack.imgur.com/yd6Yb.gif" alt="enter image description here"></p>
  
  <p>In Firefox it does wrap it but in Chrome it does not (which is how it should be).</p>