title: How to make button and checkbox fixed on the bottom of a DIV
body: <p>How can I have my button and checkbox fixed at the bottom of my div. I am able to get my scroll-able working as well. My problem is the button and the checkbox are not fixed at the bottom. </p>
  
  <p>So when I populate the div with text, the text overflows the button and the checkbox but how can I make the text be contained in the scroll-able and not overflow the button and the checkbox?</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>#chk {
    float: left
  }
  
  .btn {
    float: right
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="height:40%; overflow: scroll;" class="panel" id="panel"&gt;
  
   &lt;!--inner part of the div which contains the text (scrollable is applied here) --&gt;
  
    &lt;input id="chk" type="checkbox" /&gt; &lt;!-- should be on the left bottom of the div --&gt;
  
    &lt;button type="submit" class="btn"&gt;Button&lt;/button&gt; &lt;!--should be on the right bottom of the div (opposite the checkbox)--&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>