use align-items on .form-inline to keep items from growing too much (#21461)

diff --git a/scss/_forms.scss b/scss/_forms.scss
index 7b750f030b72c406732b48f81cd109fdc0f05012..7be62bde662e83cb996c84cbeccfc2e1f98d3fd8 100644 (file)
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -298,6 +298,7 @@ select.form-control-lg {
 .form-inline {
   display: flex;
   flex-flow: row wrap;
+  align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)
 
   // Because we use flex, the initial sizing of checkboxes is collapsed and
   // doesn't occupy the full-width (which is what we want for xs grid tier),