Как выровнять содержимое form? Текст по правому краю, а ячейки по левому

fieldset {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
  grid-gap: 1rem;
  direction: rtl;
  text-align: left;
}

label,
input {
  display: block;
}

input {
  margin-bottom: 1.25rem;
  text-align: left;
}

input:last-of-type {
  margin-bottom: .5rem;
}

<fieldset>
  <legend class="legend">Personal information</legend>

  <label for="fname">*First name:</label>
  <input type="text" name="fname" id="fname">

  <label for="mname">Middle name:</label>
  <input type="text" name="mname" id="mname">

  <label for="lname">*First name:</label>
  <input type="text" name="lname" id="lname">
</fieldset>

/* >Текст по правому краю */
label{float: right;}

<fieldset>
<legend class="legend">Personal information</legend><hr>
                <label for="fname">*First name:</label>
                <input type="text" name="fname" id="fname"><hr>
                <label for="mname">Middle name:</label>
                <input type="text" name="mname" id="mname"><hr>
                <label for="lname">*First name:</label>
                <input type="text" name="lname" id="lname"><hr>
</fieldset>

.left-block {
    display: inline-block;
    text-align: right;
}
.right-block {
    display: inline-block;
}

<div class="left-block">
    <label for="fname">*First name:</label><br>    
    <label for="mname">Middle name:</label><br>    
    <label for="lname">*First name:</label>
</div>
<div class="right-block">
    <input type="text" name="fname" id="fname"><br>    
    <input type="text" name="mname" id="mname"><br>    
    <input type="text" name="lname" id="lname">
</div>