Mam 3 div, które chciałbym wyświetlić jako komórki tabeli:

<div class="field">
    <div class="row">
        <label for="name">Subdomain</label>
        <input type="text" id="name" name="name">
        <div class="subdomain-base ">test</div>
    </div>
</div>

To jest CSS, którego używam:

body{
    font-size: 13px;
}

.field {
    width:450px;
    display: table;
}
.row {
    display: table-row;
    width: 100%;
}
.row > * {
    display: table-cell;
    border: 1px solid red;
}
label {
    width: 125px;
    height: 18px;
}
input {
    max-width: none;
    min-width: 0;
    overflow: auto;
    height: 18px;
    width: 100%;
}
.subdomain-base {
    height: 18px;
    width: 1px;
}
.subdomain-base {
    color: blue;
    font-size: 13px;
}

Działa doskonale w Firefoksie 24:

Jednak ma problem z wysokością w Chrome 30 (najnowszy):

Próbowałem wszystkiego, aby rozwiązać problem z Chrome, ale wygląda na to, że nic nie działa. Dlaczego chrom ma taką dodatkową wysokość?

Jsfiddle:http://jsfiddle.net/ahLMH/