Blueprint: Button, ButtonGroup, Select are not aligned vertically

[lijiaqigreat]

Different widget has different value for vertical-align. For example, ButtonGroup has "baseline" by chrome default, Button has "middle", Select has "middle"
This is a style that I think is undesirable. Please ignore the dropdown arrow in example. I can't get icon to work in jsfiddle

-@blueprint/[email protected]
-Linux, Latest Chrome as well as Firefox

Steps to reproduce

https://jsfiddle.net/f43s95rf/

Actual behavior

Expected behavior

[llorca]

What is the ideal scenario? Everything baseline or everything middle?

[lijiaqigreat]

@llorca I'd say everything should be middle. Since if widgets of different size are put together, it usually looks best to align middle. But I don't think have the experience or knowledge to have a well-thought suggest.

[giladgray]

@lijiaqigreat have you tried making the row containing these elements display: flex? that should sort out your layout challenges real quick via align-items.

[lijiaqigreat]

@giladgray it worked! thanks. Feel free to close this ticket, or change them to middle anyway. Since it might be a bug in other scenarios.

[adidahiya]

+1, it would be nice to fix this for non-flex scenarios too