Here is the problem:  group input in Bootstrap with button have the lower border not lining up:

So I started investigating and several posts pointed to the type or browser that maybe isn’t rendering correctly, like this one.  Luckily at the very bottom of it there was the hint to the right solution.  The number precision of the sass compiler is what creates different line height for the input and button. And that was it.  I am using the sass version of bootstrap but the other obstacle was that I am using Webpack to compile sass with the sass-loader.

There are all sort of posts on how to change the sass compiler number precision, but very little to do so with webpack. Finally this post suggests to add a query parameters to the sass-loader config, and boom, it worked:

As suggested in this post a good number precision is 10: 'sass-loader?precision=10' .  Here is how I changed the webpack config file:

module: {
        rules: [
            {
                test: /\.scss$/,
                use: extractCSS.extract({
                    use: ['css-loader', 'sass-loader?precision=10'],
                    fallback: 'style-loader'
                })
            }
        ]
    }