How to keep a <hr> in the bottom of element?
<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>