HTML/CSS: style form labels to display on the same line and inline with form fields

Question

I have looked on here, but none of the answers have worked for me.

I have 2 form fields in one line, i want to style the form labels to also be on one line and also be inline with the correct form field.

The two methods i have used have either made the form fields inline and also the labels, but one of the labels is not inline, no matter if i try using margins or padding, it just would not move past a certain px/%. (Method 1)

The other makes the labels inline, but once again one of the labels was unable to move past a certain px/% and it messed up the form fields alignmnet. (Method 2)

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>

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>

Answer 1

Method three:

label {
  display: inline-block;
}
label>input {
  display: block;
}

<label>
  First name
  <input type="text" />
</label>
<label>
  Last name
  <input type="text" />
</label>