title: How can i prevent label in div overlapping another div content on a table td
body: <pre><code>    &lt;table&gt;
  &lt;thead&gt;
    &lt;th&gt;Item&lt;/th&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;div style="display:inline-block;width:25%"&gt;
        &lt;label style="display:block"&gt;abcdefghijklmnop&lt;/label&gt;
        &lt;input type="checkbox"&gt;
        &lt;/div&gt;
        &lt;div style="display:inline-block;width:25%"&gt;
        &lt;label style="display:block"&gt;abcdefghijklmnop&lt;/label&gt;
        &lt;input type="checkbox"&gt;
        &lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I want it to auto jump to next line if the label text overflow. I no want the label to be hidden or using ellipsis.</p>
  
  <p>Note: In my case, i will loop the div content in the same row td. I want to break the word to next line in full size of browser or browser resized to smaller.</p>
  
  <p>How can i solve this problem?</p>