How to add a regular space between text and the boxes next to them using CSS/HTML?

I have the following code, which is kind of a registration form, but the space between the credential and the box next to it isn't regular. By regular, I mean that the space between one credential and its box and another credential and its box is irregular.

<html>
    <head>
        <title>My first code</title>
        <style>
            h1 {
                color:blue;
                font-family:'Times New Roman', Times, serif;
                font-style: bold;
            }
            
            img {
                border-style:double;
                border-radius: 5px;
                border-color: blue;
            }

            p {
                color:blue;
                font-size: larger;
            }

            label {
                font-family: 'Times New Roman', Times, serif;
            }

            legend {
                font-family: 'Times New Roman', Times, serif;
            }
            
            input {
                text-indent: 30%
            }
        </style>


    </head>

<body>
   
    
        <form>
            <fieldset>
                <legend>Form:</legend>
                <label for="fname">First Name:</label>
                <input type="text" id="fname" name="fname"><br><br>
                <label for="lname">Last Name:</label>
                <input type="text" id="lname" name="lname"><br><br>
                <label for="Date of Birth">Date of Birth:</label>
                <input type="date" id="Date of Birth" name="Date of Birth"><br><br>                
                <label for="email">Email:</label>
                <input type="text" id="email" name="email"><br><br>
                <label for="ps">Password:</label>
                <input type="password" id="ps" name="email"><br><br>
                
            </fieldset>
        </form>
</body>
</html>

My best attempt was to add the <pre> tag and give spaces but they're irregular as well. Here's my attempt:

<html>
    <head>
        <title>My first code</title>
        <style>
            h1 {
                color:blue;
                font-family:'Times New Roman', Times, serif;
                font-style: bold;
            }
            
            img {
                border-style:double;
                border-radius: 5px;
                border-color: blue;
            }

            p {
                color:blue;
                font-size: larger;
            }

            label {
                font-family: 'Times New Roman', Times, serif;
            }

            legend {
                font-family: 'Times New Roman', Times, serif;
            }
            
            input {
                text-indent: 30%
            }
        </style>


    </head>

<body>
   
    <pre>
        <form>
            <fieldset>
                <legend>Form:</legend>
                <label for="fname">First Name:</label>    <input type="text" id="fname" name="fname">
                
                <label for="lname">Last Name:</label>    <input type="text" id="lname" name="lname">
                
                <label for="Date of Birth">Date of Birth:</label>  <input type="date" id="Date of Birth" name="Date of Birth">
                
                <label for="email">Email:</label>        <input type="text" id="email" name="email">
                
                <label for="ps">Password:</label>     <input type="password" id="ps" name="email">
                
            </fieldset>
        </form>
    </pre>
    
</body>
</html>

Can anyone tell me how to make the space regular?

Solution

This is quite simple to achieve and there are multiple solutions to this. What I did, is adding to the input tag attribute of float to the right and added margin-right.

h1 {
  color: blue;
  font-family: 'Times New Roman', Times, serif;
  font-style: bold;
}

img {
  border-style: double;
  border-radius: 5px;
  border-color: blue;
}

p {
  color: blue;
  font-size: larger;
}

label {
  font-family: 'Times New Roman', Times, serif;
}

legend {
  font-family: 'Times New Roman', Times, serif;
}

input {
  text-indent: 30%;
  float: right;
  margin-right: 40%;
}

<form>
  <fieldset>
    <legend>Form:</legend>
    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last Name:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="Date of Birth">Date of Birth:</label>
    <input type="date" id="Date of Birth" name="Date of Birth"><br><br>
    <label for="email">Email:</label>
    <input type="text" id="email" name="email"><br><br>
    <label for="ps">Password:</label>
    <input type="password" id="ps" name="email"><br><br>
  </fieldset>
</form>