How to style select with form-control style so that it aligns on the left with input with form-control style?

I notice that if I use flexbox with a select and input, both with form-control style, that they do not align on the left (I have put that text in bold as people do not seem to understand the problem). The left side of the top input is not aligned with the left side of the select. They align if I remove the padding of the input.

This problem appears on Chrome and Safari. Firefox is okay.

Plunker

Markup

<div class="all"><div class="container"><label class="label">Input default</label><input class="input form-control"></div><div class="container"><label class="label">Input no padding</label><input class="input form-control no-padding"></div><div class="container"><label class="label">Select</label><select class="input form-control"><option>Hello</option><option>World</option></select></div></div>

CSS

.all {  display: flex;  flex-direction: column;  padding: 20px;}.container {  display: flex;  flex: 1;  align-items: center;}.input {  flex: 1}.label {  flex: 1;  background: yellow;  text-align: right;  padding-right: 10px;  margin-bottom: 0;}.no-padding {  padding: 0;}

How can I style the select only or use flexbox so that it aligns with the input?