Display: table-cell problems in chrome

Answer 1

Sadly, don't have enough rep to respond to Dhaval's answer.

Change to

vertical-align: middle;

http://jsfiddle.net/ahLMH/3/

Answer 2

The problem appears to be due to display: table-cell on input elements being experimental. See this question for more details: display:table-cell not working on an input element

The solution is to wrap the input in a span and apply display: table-cell to the span and to remove overflow: auto from the input.

The new mark up looks like so:

<div class="field">
    <label for="name">Subdomain</label>
    <span>
        <input type="text" id="name" name="name">
    </span>

    <div class="subdomain-base ">test</div>
</div>

The css now looks like this:

body {
    font-size: 13px;
}
.field {
    width:450px;
    display: table;
}
.field > * {
    display: table-cell;
    border: 1px solid red;
}
span {
    padding: 0 5px;
}
label {
    width: 125px;
}
input {
    width: 100%;
}
.subdomain-base {
    width: 1px;
}
.subdomain-base {
    color: blue;
    font-size: 13px;
}

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

Answer 3

Set this:

.row > * {
  display: table-cell;
  border: 1px solid red;
  vertical-align: top; // add this
}

Updated Fiddle