form-select specifies vertical-align: middle which causes alignment problems

Created by: rmacfadyen

There's a layout issue when using a SELECT and .form-select that "pushes" the SELECT "down" two pixels. This makes the alignment of INPUTs and a SELECTs incorrect.

A picture is probably better than my description

The underlying cause appears to be that .form-select has "vertical-align: middle" (v4 does not). Setting that to "vertical-align: initial" corrects the problem.

Alternatively, the problem might be with .form-control not having vertical-align: middle,

On v4 .form-select did not specify a vertical align.

OS: win10, Browser: Chrome 86, Firefox 83, Edge 87, Opera 72

Test case (v5 - fails): https://jsfiddle.net/1kc5osh4/3/

Test case (v4 - works): https://jsfiddle.net/fnau046c/