全高度border-right of divs with float：left

Question

I need full height border-right of first and second divs with float:left
CSS:

div.wrapper {
    border: 1px solid black;
}
div.wrapper > div {
    text-align: center;
    width: 50px;
    padding-left: 5px;

    float: left;
}
div.w-1, div.w-2 {
    border-right: 1px solid black;
}

HTML:

   <div class='wrapper'>
        <div class='w-1'>
            <p>text</p>
        </div>
        <div class='w-2'>
            <p>text</p>
            <p>text</p>
        </div>
        <div class='w-3'>
            <p>text</p>
            <p>text</p>
            <p>text</p>
        </div>
        <br style='clear: both;'>
    </div>

please help with solution. Have jsfiddle here http://jsfiddle.net/kto5pupz/

Answer 1

HTML

<div class='wrapper'>
    <div class='w-1'>
        <p>text</p>
    </div>
    <div class='w-2'>
        <p>text</p>
        <p>text</p>
    </div>
    <div class='w-3'>
        <p>text</p>
        <p>text</p>
        <p>text</p>
    </div>
    <br style='clear: both;'>
</div>

CSS

div.wrapper {
    border: 1px solid black;
    overflow: hidden;
}
div.wrapper > div {
    text-align: center;
    width: 50px;
    padding: 0 0 9999px 5px;
    float: left;
    border-left: 1px solid black;
    margin: 0 0 -9999px;
}
div.wrapper > div:first-child{
    border: none;
}

Link to fiddle