title: Need html checkbox label to wrap "nicely"
body: <p>I have a grid of checkboxes where each cell has a fixed width, and each checkbox is preceded with a small image.  In cases where the label text is too long, I'm having a hard time getting the text to wrap underneath the checkbox.</p>
  
  <p><img src="https://i.stack.imgur.com/7WxGf.png" alt="screenshot 1"></p>
  
  <p>Referring to the above screenshot, I'd like "text that wraps" to be aligned with the checkbox, rather than wrapping underneath the image, like so:</p>
  
  <p><img src="https://i.stack.imgur.com/10MsF.png" alt="screenshot 2"></p>
  
  <p>I've set up a <a href="http://jsfiddle.net/9s8Db/3/" rel="nofollow noreferrer">fiddle</a> with my current markup and styles. What I can't change is the HTML structure, but any CSS changes are fine.</p>
  
  <p>Here is a code snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.checkbox-list {
  }
  img.placeholder{
      width:16px;
      height:16px;
      background-color:lightblue;
  }
  td {
      padding:2px;
      width:150px;
      vertical-align:top;
  }
  label {
      /*display:inline-block;*/
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="checkbox-list"&gt;
      &lt;tbody&gt;&lt;tr&gt;
          &lt;td&gt;
              &lt;img class="placeholder"/&gt;
              &lt;label&gt;
                  &lt;input type="checkbox"/&gt;
                  &lt;span&gt;Some really long text that wraps&lt;/span&gt;&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img class="placeholder"/&gt;
              &lt;label&gt;
                  &lt;input type="checkbox"/&gt;
                  &lt;span&gt;Foo&lt;/span&gt;&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img class="placeholder"/&gt;
              &lt;label&gt;
                  &lt;input type="checkbox"/&gt;
                  &lt;span&gt;Foo&lt;/span&gt;&lt;/label&gt;&lt;/td&gt;
      &lt;/tr&gt;&lt;tr&gt;
          &lt;td&gt;
              &lt;img class="placeholder"/&gt;
              &lt;label&gt;
                  &lt;input type="checkbox"/&gt;
                  &lt;span&gt;Foo&lt;/span&gt;&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img class="placeholder"/&gt;
              &lt;label&gt;
                  &lt;input type="checkbox"/&gt;
                  &lt;span&gt;Foo&lt;/span&gt;&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;img class="placeholder"/&gt;
              &lt;label&gt;
                  &lt;input type="checkbox"/&gt;
                  &lt;span&gt;Foo&lt;/span&gt;&lt;/label&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;&lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>