Why does this input range push content downwards? - css

Question

I'm trying to align a vertical range input beside a column of labels. The input will have steps so the little bubble will always sit beside a label, and I have gotten the heights matching, so that's no problem.
However, no matter how I structure the two boxes (the input vertical range on the left and the labels on the right), the input always pushes the first label down, almost like it was a display: inline-block element.
HTML:
<div class="cell-left">
<input type="range" orient="vertical" min="0" max="3" step="1" />
</div>
<div class="cell-right">
<div class="row">Hello</div>
<div class="row">Hello</div>
<div class="row">Hello</div>
<div class="row">Hello</div>
</div>
CSS:
input[type=range] {
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* WebKit */
width: 8px;
height: 4rem;
padding: 0 5px;
}
.cell-left {
display: table-cell;
}
.cell-right {
display: table-cell;
}
https://jsfiddle.net/byn4kv0z/

Answer 1

That is expected behaviour. The vertical-align property by default is set to baseline which leads to the result. Changing the vertical-align property to top would give you the result you are looking for.
.cell-right {
display: table-cell;
vertical-align:top;
}
jsFiddle
Vertical-align can be quite tricky at times and there's quite a lot of magic going on in there. Here's a nice detailed article breaking it down into understandable terms: Vertical-align: All you need to know

Answer 2

Short answer
That's expected behavior of vertical-align: baseline (the implicit default value). You can use:
.cell-right {
display: table-cell;
vertical-align: top;
}
Fiddle
Explanation
Both the range input and the second table cell's text are part of the same inline formatting context. Regarding the default vertical-align value (baseline), the spec says:
baseline
Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.
This means the range input's bottom is aligned with the parent box's baseline, and so is the second cell's first line box's baseline. Here you can see where parent box's baseline is:
That is because the vertical range input stretches the containing line box, resulting in the effect you see.
As for your remark:
the input always pushes the first label down, almost like it was a display: inline-block element.
The range input is a replaced element, and its behavior is indeed nearly identical to an inline-block element.