How to draw a bottom border to each of 3 inner div-columns inside parent div and each column bottom border must touch the bottom border of parent div?

<p>&lt;div id="parent"&gt;</p> <p>    &lt;div class="col"&gt;column1&lt;/div&gt;</p> <p>    &lt;div class="col"&gt;column2&lt;/div&gt;</p> <p>    &lt;div class="col"&gt;column3&lt;/div&gt;</p> <p>&lt;/div&gt;</p> <p> </p> <p>---------------------------------</p> <p>Styling: </p> <p>#parent {</p> <p>      border:1px solid #b2b2b2;</p> <p>      overflow:hidden;</p> <p>      display:inline-block;</p> <p>}</p> <p> </p> <p>.col {</p> <p>      float:left;</p> <p>      border:1px solid red;</p> <p>}</p> <p>and this is the code I ran on an online editor:</p> <p><a href="http://cssdesk.com/CD4Dq">http://cssdesk.com/CD4Dq</a></p>