Align two element rows by second element - css

Question

I have rows consisting of two elements that I'd like to align by the second element (they're input boxes, and it's nice to have them all line up vertically). The solution I behaves exactly how I want when the elements fit onto one line, I don't want to be using the width of the first element to set the horizontal position. This starts to act weird in small windows or on mobile (when the width of the label is more than 45% of the screen it starts wrapping again).
What would be the proper way to achieve the same result?
FIDDLE
HTML:
<label>Test</label>
<input type="number" value="0">
<br />
<label>Test longer</label>
<input type="number" value="0">
<br />
<label>Test longest text</label>
<input type="number" value="0">
<br />
CSS:
label {
display: inline-block;
float: left;
width: 45%;
text-align: right;
padding: 2px;
margin: 2px;
}
input {
display: inline-block;
float: left;
width: 200px;
padding: 2px;
margin: 2px;
}

Answer 1

You can use flex properties to display rows and columns and remove float
<div class="flex">
<label>Test</label>
<input type="number" value="0">
</div>
<div class="flex">
<label>Test longer</label>
<input type="number" value="0">
</div>
<div class="flex">
<label>Test longest text</label>
<input type="number" value="0">
</div>
in css
.flex {
display:flex;
}
label {
width: 45%;
text-align: right;
padding: 2px;
margin: 2px;
}
input {
width: 200px;
padding: 2px;
margin: 2px;
}
#media(max-width:200px){
.flex{
display:block;
}
}
and use media queries for screen below 200px(or your preference) to make the text and input appear vertically