title: Float a div next to a checkbox
body: <p>I have a container div of set width that contains a checkbox and a label. The problem is that instead of floating next to the checkbox, the label is under the checkbox. How can I make the label float next to the checkbox. This is the HTML and CSS and I have a <a href="https://jsfiddle.net/7np4y68k/" rel="nofollow noreferrer">jsFiddle</a> here.</p>
  
  <pre><code>&lt;div id="CheckboxContainer"&gt;
  &lt;input type="checkbox" id="TheCheckbox" /&gt;
  &lt;div id="TheCheckboxLabel"&gt;
  This text should float next to the checkbox instead of being under.
  &lt;/div&gt;
  &lt;/div&gt;
  
  #CheckboxContainer{width:300px;margin:20px auto;background:red;overflow:hidden;}
  #TheCheckbox{float:left;display:inline-block;margin:10px 10px;}
  #TheCheckboxLabel{float:left;display:inline-block;margin:10px 10px;}
  </code></pre>