title: Grouping text and an image together
body: <p>I <em>feel</em> like this should be simple. But I'm not having much luck.</p>
  
  <p>I'm creating a website with a table. The table has headers which contain text to describe the column and an image. For more info users can hover over the image.</p>
  
  <p>But what I'm seeing happen is that the text and the image do not align with each other. Instead the image wraps onto a new line. i.e. For thin columns.</p>
  
  <p>I want to prevent that from happening. So far the only success I've had is by using another table in the table header. Which seems ridiculous.</p>
  
  <p>How can I achieve this?</p>
  
  <p>My html with some attempts.</p>
  
  <pre><code>&lt;table class="inline"&gt;
      &lt;tr&gt;
        &lt;th&gt;TextA &lt;img class="info" src="/images/info.png" onmouseover="ShowInfo()"/&gt;&lt;/th&gt;
        &lt;th&gt;&lt;table&gt;&lt;tr&gt;&lt;td&gt;TextB&lt;/td&gt; &lt;td&gt;&lt;img class="info" src="/images/info.png" onmouseover="ShowInfo()"/&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/th&gt;
        &lt;th&gt;&lt;span style="display: inline-block;"&gt;TextC &lt;img class="info" src="/images/info.png" onmouseover="ShowInfo()"/&gt;&lt;/span&gt;&lt;/th&gt;
        &lt;th&gt;TextD &lt;img class="info" src="/images/info.png" onmouseover="ShowInfo()"/&gt;&lt;/th&gt;
        &lt;th&gt;TextE &lt;img class="info" src="/images/info.png" onmouseover="ShowInfo()"/&gt;&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p>My style sheet</p>
  
  <pre><code>.info {
      width: 16px;
      height: 16px;
      float: right;
  }
  
  .inline {
      white-space: nowrap;
      /*overflow: hidden;*/
      /*display: inline-block;
      table-layout:fixed;*/
  }
  </code></pre>