Equal height double column using css : <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>#DIV_1 {
    bottom: -10px;
    height: 176px;
    left: 0px;
    position: relative;
    right: 0px;
    text-align: left;
    top: 10px;
    width: 379px;
    perspective-origin: 189.5px 88px;
    transform-origin: 189.5px 88px;
    background: rgb(238, 238, 238) none repeat scroll 0% 0% / auto padding-box border-box;
    font: normal normal normal normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
    list-style: none outside none;
    margin: 0px 0px -5px;
    overflow: hidden;
}/*#DIV_1*/

#DIV_2 {
    box-sizing: border-box;
    float: left;
    height: 77px;
    text-align: center;
    width: 189.5px;
    perspective-origin: 94.75px 38.5px;
    transform-origin: 94.75px 38.5px;
    border-right: 5px solid rgb(255, 255, 255);
    font: normal normal normal normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
    list-style: none outside none;
    padding: 30px;
}/*#DIV_2*/

#DIV_3 {
    box-sizing: border-box;
    float: left;
    height: 77px;
    text-align: center;
    width: 189.5px;
    perspective-origin: 94.75px 38.5px;
    transform-origin: 94.75px 38.5px;
    font: normal normal normal normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
    list-style: none outside none;
    padding: 30px;
}/*#DIV_3*/

#DIV_4 {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    float: left;
    height: 99px;
    text-align: center;
    width: 189.5px;
    column-rule-color: rgb(255, 255, 255);
    perspective-origin: 94.75px 49.5px;
    transform-origin: 94.75px 49.5px;
    background: rgb(192, 57, 43) none repeat scroll 0% 0% / auto padding-box border-box;
    border-top: 5px solid rgb(255, 255, 255);
    border-right: 5px solid rgb(255, 255, 255);
    border-bottom: 0px none rgb(255, 255, 255);
    border-left: 0px none rgb(255, 255, 255);
    font: normal normal bold normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
    list-style: none outside none;
    outline: rgb(255, 255, 255) none 0px;
    padding: 30px;
}/*#DIV_4*/

#DIV_5 {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    float: left;
    height: 82px;
    text-align: center;
    width: 189.5px;
    column-rule-color: rgb(255, 255, 255);
    perspective-origin: 94.75px 41px;
    transform-origin: 94.75px 41px;
    background: rgb(142, 68, 173) none repeat scroll 0% 0% / auto padding-box border-box;
    border-top: 5px solid rgb(255, 255, 255);
    border-right: 0px none rgb(255, 255, 255);
    border-bottom: 0px none rgb(255, 255, 255);
    border-left: 0px none rgb(255, 255, 255);
    font: normal normal bold normal 14px / normal "Lucida Grande", Helvetica, Arial, sans-serif;
    list-style: none outside none;
    outline: rgb(255, 255, 255) none 0px;
    padding: 30px;
}/*#DIV_5*/</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="DIV_1"&gt;
	&lt;div id="DIV_2"&gt;
		Ben Franklin
	&lt;/div&gt;
	&lt;div id="DIV_3"&gt;
		Thomas Jefferson
	&lt;/div&gt;
	&lt;div id="DIV_4"&gt;
		George Washington
	&lt;/div&gt;
	&lt;div id="DIV_5"&gt;
		Abraham Lincoln
	&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>I have 2 column that its content might have different length, thus it will have multiple lines, so how do I ensure that the least line of content have the equal height? I can't use fixed height like <code>height:100px;</code> because the length of the content might be more than that.</p>
