Alignment of two components for an input field (Label + Field) - html

Question

This is my current input field styling however for some reason which I am unable to see, they are not aligning properly next to each other.
Code:
<div class="labelInputField">Confirm Password</div><input type="text" class="inputField">
.labelInputField {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
padding: 8px;
width: 150px;
color: white;
background: rgba(0,0,0,1);
border: 2px solid #000;
display: inline-block;
height: 30px;
margin-top: 15px;
font-size: 16px;
}
.inputField {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
padding: 8px;
width: 180px;
color: white;
background: rgba(0,0,0,0.4);
border: 2px solid #000;
display: inline-block;
height: 30px;
font-size: 16px;
}
JSFiddle:
https://jsfiddle.net/0Lsake9j/
Any solutions?

Answer 1

Remove margin-top:15px and add line-height:30px; in .labelInputField style. That will make your div and input alignment proper.
.labelInputField {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
padding: 8px;
width: 150px;
color: white;
background: rgba(0,0,0,1);
border: 2px solid #000;
display: inline-block;
height: 30px;
line-height:30px;
font-size: 16px;
}
.inputField {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
padding: 8px;
width: 180px;
color: white;
background: rgba(0,0,0,0.4);
border: 2px solid #000;
display: inline-block;
height: 30px;
font-size: 16px;
}
<div class="labelInputField">Confirm Password</div><input type="text" class="inputField">
You can also test it here

Answer 2

Offload layout responsibility to a container and/or additional layers of markup.
Remove margin-top on the div
Use a <label for="[YOUR_INPUT_ID]"></label> and ensure your input has id="[YOUR_INPUT_ID]".
Add type="password" on your input, unless you have a specific reason not to.
Remove existing layouts styles from selectors that are styling the input and label (i.e. inline-block in this case.).
Apply your layout styling with an object that's sole purpose is to handle layout of your elements
.iHandleLayout {
display: flex;
/* rest of your layout styling etc. */
}
.labelInputField {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
padding: 8px;
min-width: 150px;
color: white;
background: rgba(0,0,0,1);
border: 2px solid #000;
font-size: 16px;
}
.inputField {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
padding: 8px;
width: 180px;
color: white;
background: rgba(0,0,0,0.4);
border: 2px solid #000;
font-size: 16px;
}
<div class="iHandleLayout">
<label class="labelInputField" for="password">Confirm Password</label>
<input type="password" class="inputField" id="password">
</div>
In the end, there are many ways to control the layout (display: inline-block, flex, table, etc), but the main principle is the separation of concerns with your styling and the markup structure as part of that separation.