Css Non table Row heights

by amindunited

HTML

<div class="wrap">
    <div class="row">
        <div class="td">1</div>
        <div class="td">2</div>
        <div class="td">3</div>
        <div class="td">4</div>
    </div>
    
    <div class="row">
        <div class="td">1 1 1 1 1 1 1 1 </div>
        <div class="td">2</div>
        <div class="td">3</div>
        <div class="td">4</div>
    </div>
    
    <div class="row">
        <div class="td">1</div>
        <div class="td">2</div>
        <div class="td">3</div>
        <div class="td">4</div>
    </div>
</div>

CSS

.row:after, .clearfix:after { clear:both; content: '.'; display:block; height: 0px; visibility:hidden; }
.wrap div.row {
    border: solid 1px gray;
    width: 220px;
}
.row {
    min-height: 25px;
}
.td {
    line-height: 20px;
    word-wrap: break-word;
    border: solid 1px gray;
    width: 50px;
    vertical-align: top;
    display: inline-block;
    text-align: center;
}