I've searched extensively, but none of the solutions provided have been effective for me.
My issue involves trying to align two form fields and their labels on a single line, ensuring that both elements are in proper alignment.
Despite my attempts using two different methods, I encountered persistent issues. With Method 1, one label consistently failed to align properly even with adjustments to margins or padding. Method 2 also presented challenges as it caused misalignment due to limitations on label positioning.
Solution Attempt - Method 1
label{
text-transform: uppercase;
font-size: 0.8em;
font-weight: bold;
margin-left: 11px
}
label.right_lab{
display:inline-block;
}
label#lname{
float: right;
margin-left: 60% !important;
}<label for="fname" class="right_lab">First name</label>
<label for="lname" class="right_lab">Last name</label><br>
<input type="text" id='fname' name="fname" value="" placeholder="e.g Joe">
<input type="text" id='lname' name="lname" value="" placeholder="e.g.Bloggs"><br>Solution Attempt - Method 2
label{
text-transform: uppercase;
font-size: 0.8em;
font-weight: bold;
margin-left: 11px
}
label.right_lab{
display:inline-block;
}
label#lname{
float: right;
margin-left: 60% !important;
}<label for="fname" class="right_lab">First name</label>
<input type="text" id='fname' name="fname" value="" placeholder="e.g Joe">
<label for="lname" class="right_lab">Last name</label><br>
<input type="text" id='lname' name="lname" value="" placeholder="e.g.Bloggs"><br>