css: set the height of floating divs as maximum of their heights

Question

Is it possible to fix this jsFiddle with pure css so that all 3 divs that are in the same row have the same height, the maximum of their 3 heitghts?

The code is here:

<style>
#main{
    border:1px solid red;
    width:605px;
    overflow:hidden;
}
#zero{
    border:1px solid blue;
}
.small{
    border:1px solid green;
    float:left;
    width:199px;
}
</style>
<div id="main">
    <div id="zero">
        0
    </div>
    <div class="small">
        small text
    </div>
    <div class="small">
        large text large textlarge textlarge textlarge textlarge textlarge textlarge textlarge textlarge textlarge textlarge textlarge text
    </div>
    <div class="small">
        another small text
    </div>
</div>

Again, pure css solution is preferable. If not, then html solution is preferable next. Javascript (/jQuery) solution is not needed. Thank you.

Answer 1

You could replace float:left with display:table-cell:

EXAMPLE HERE

.small {
    border:1px solid green;
    display:table-cell;
    width:199px;
}