fluid columns separated with border

by pixeloco

HTML

<section>
    <div id="one">hello</div>
    <div id="two">im<br />very<br />tall<br /><br />woooo<br />hope you arent scared of heights</div>
    <div id="three">all our borders stretch vertically to accomodate</div>
    <div id="four">hooray</div>
</section>

CSS

section {
display: table; 
width: 100%;  
}

div {
padding: 0 10px;
}

#one {
border-right: 4px solid #000;
margin-right: -4px;
width: 30%;
display: table-cell;

}
#two {
border-right: 4px solid #000;
margin-right: -4px;
width: 10%;
display: table-cell;
}
#three {
border-right: 4px solid #000;
margin-right: -4px;
width: 40%;
display: table-cell;
}

#four {
width: 20%;
display: table-cell;
}