title: How to keep a <hr> in the bottom of element?
body: <p>I have a <code>div</code> that I need to put a <code>hr</code> in the end of that.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
      border-top: 1px solid;
      border-left: 1px solid;
      border-right: 1px solid;
      min-height: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt; this is a test &lt;hr&gt; &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you see in the above fiddle, that <code>hr</code> is under the text, but I need to set it in the end of <code>div</code> (something like <code>div{border-bottom: 1px solid}</code>).</p>
  
  <p><strong>Note:</strong> I cannot use <code>margin-top</code> for <code>hr</code>. Because sometimes there is a lot of text into <code>div</code> and in that case there will be a blank space between <code>hr</code> and text forever. I just want to keep it in the bottom of <code>div</code> when there is one or two line of text.</p>
  
  <p>Well, how can I do that?</p>