how to make

i am working on a project and i am trying to create a registration form for the website. i want both the label and its corresponding text/input area to appear on the same line. i have tried a lot of methods to little or no avail. Please can you help me out with the right way to go about this as i do not want to get it right by trial and error thanks. here’s my code

HTML

<div id="form">
  <form action="" method="post" name="registration" class="register">
  <fieldset>
  <label for="Student"> Name: </label>
  <input name="Student" />
  <label for="Matric_no"> Matric number: </label>
  <input name="Matric_no" />
  <label for="Email"> Email: </label>
  <input name="Email" />
  <label for="Username"> Username: </label>
  <input name="Username" />
  <label for="Password"> Password: </label>
  <input name="Password" type="password" />
  <input name="regbutton" type="button" class="button" value="Register" />
  </fieldset>
  </form>
</div>

CSS

#form {
  background-color: #FFF;
  height: 600px;
  width: 600px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 0px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 0px;
}

label {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 18px;
  color: #333;
  height: 20px;
  width: 200px;
  margin-top: 10px;
  margin-left: 10px;
  text-align: right;
  clear: both;
}

input {
  height: 20px;
  width: 300px;
  border: 1px solid #000;
  margin-top: 10px;
  float: left;
}

solution

Assuming you want to float the elements, you would also have to float the label elements too.

Something like this would work..

label {
  /* Other styling.. */
  text-align: right;
  clear: both;
  float:left;
  margin-right:15px;
}

#form {
  background-color: #FFF;
  height: 600px;
  width: 600px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 0px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 0px;
  text-align:center;
}
label {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 18px;
  color: #333;
  height: 20px;
  width: 200px;
  margin-top: 10px;
  margin-left: 10px;
  text-align: right;
  clear: both;
  float:left;
  margin-right:15px;
}
input {
  height: 20px;
  width: 300px;
  border: 1px solid #000;
  margin-top: 10px;
  float: left;
}
input[type=button] {
  float:none;
}
<div id="form">
  <form action="" method="post" name="registration" class="register">
    <fieldset>
        <label for="Student">Name:</label>
        <input name="Student" />
        <label for="Matric_no">Matric number:</label>
        <input name="Matric_no" />
        <label for="Email">Email:</label>
        <input name="Email" />
        <label for="Username">Username:</label>
        <input name="Username" />
        <label for="Password">Password:</label>
        <input name="Password" type="password" />
        <input name="regbutton" type="button" class="button" value="Register" />
    </fieldset>
  </form>
</div>

Alternatively, a more common approach would be to wrap the input/label elements in groups:

<div class="form-group">
  <label for="Student">Name:</label>
  <input name="Student" />
</div>
#form {
  background-color: #FFF;
  height: 600px;
  width: 600px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 0px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 0px;
  text-align:center;
}
label {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 18px;
  color: #333;
  height: 20px;
  width: 200px;
  margin-top: 10px;
  margin-left: 10px;
  text-align: right;
  margin-right:15px;
  float:left;
}
input {
  height: 20px;
  width: 300px;
  border: 1px solid #000;
  margin-top: 10px;
}
<div id="form">
  <form action="" method="post" name="registration" class="register">
    <fieldset>
        <div class="form-group">
            <label for="Student">Name:</label>
            <input name="Student" />
        </div>
        <div class="form-group">
            <label for="Matric_no">Matric number:</label>
            <input name="Matric_no" />
        </div>
        <div class="form-group">
            <label for="Email">Email:</label>
            <input name="Email" />
        </div>
        <div class="form-group">
            <label for="Username">Username:</label>
            <input name="Username" />
        </div>
        <div class="form-group">
            <label for="Password">Password:</label>
            <input name="Password" type="password" />
        </div>
        <input name="regbutton" type="button" class="button" value="Register" />
    </fieldset>
  </form>
</div>