HTML elements alignment issue and label and input - html

Question

Folks:
I am trying the HTML exercises to build a dating website as
https://www.coursera.org/learn/html-css-javascript/peer/biy2Z/dating-web-site-assessment
1) the labels "Email", "Mobile", and "Address" in the "Your contact information" are not in the same line as their corresponding input element. What may be the problem in the code that caused this?
2) The same issue for in the "Method to contact you: Email Whatsapp In-app chat", the "In-app chat" is put in the second line.
below is the code:
fieldset {
background:lightyellow;
border:10px solid yellow;
margin-bottom:10px;
width:720px;
}
label {
width:180px;
display:inline-block;
text-align:right;
vertical-align:top;
}
.widthclass{ width:auto; }
.rangeLow, .rangeHigh{
text-align:center;
width:40px;
display:inline-block;
vertical-align:top;
color:white;
}
.rangeLow{ background-color:red;}
.rangeHigh{background-color:blue;}
.textareaFormat{width:360px; height:50px;}
label:hover{font-size:20px}
input: hover{font-size:20px}
<FORM action="http://ihome.ust.hk/~rossiter/cgi-
bin/show_everything.php " method="post"
enctype="multipart/form-data" >
<h1>
Please Enter Your Details For Our Dating Websites!
</h1>
<fieldset>
<legend> Your face </legend>
<label for="yourimage"> Your image </label>
<input type="file" id="yourimage" name="avatar"
required>
<br>
<label for="imagePreview" > Image preview:</label><img
src="" id="preview">
</fieldset>
<fieldset>
<legend> Your General Details </legend>
<label for="tname"> Name: </label>
<input type="text" id="tname" name="tname"
placeholder="Your Full Name" required>
<br>
<label for="gender" > Gender: </label>
<input type="radio" name="malegender" id="male" required
>
<label for="male" class=widthclass> Male </label>
<input type="radio" name="femalegender" id="female"
required>
<label for="female" class=widthclass > Female </label>
<br>
<label for="age" >Age: </label>
<input type="number" id="age" name="age" required>
<br>
<label for="birthday"> Date of birth: </label> <input
type="date" name="birthday" id="birthday" required>
<br>
<label for="favoriteColor"> Favorite color: </label>
<input type="color" name="color" id="color">
<br>
<label for="whichCountry"> Which country: </label>
<select name="country">
<option></option>
<option value="noSelection"> no selection </option>
<option value="u.s." > United States </option>
<option value="france"> France </option>
<option value="germany"> Germany </option>
<option value="england"> England </option>
<option value="china"> China </option>
<option value="japan"> Japan </option>
</select>
</fieldset>
<fieldset>
<lengend>Your indicators</lengend>
<br>
<label for="height" > Height:</label>
<div class="rangeLow"> Short </div>
<input type="range" min="0" max="100" step="5"
name="height id=height" >
<div class="rangeHigh"> Tall </div>
<br>
<label for="salary" > Salary:</label>
<div class="rangeLow"> Poor </div>
<input type="range" min="0" max="100" step="5"
name="height" id=salary" >
<div class="rangeHigh"> Rich </div>
</fieldset>
<fieldset>
<lengend>Your contact information</lengend>
<br>
<label for="email" > Email: <label> <input type="email"
id="email" name="email" required>
<br>
<label for="mobile"> Mobile: </label>
<input type="tel" id="mobile" name="mobile" >
<br>
<label for="address" > Address </label>
<textarea rows="3" cols="60" id="address"
name="address"class="textareaFormat">
</textarea>
<br>
<label for="contact_method"> Method to contact you:
</label>
<input type="checkbox" name="contactmethod"
value="email" id="checkboxemail">
<label for="checkboxemail" class="widthclass"> Email
</label>
<input type="checkbox" name="contactmethod"
value="Whatsapp" >
<label for="checkboxwhatsapp" class="widthclass" >
Whatsapp </label>
<input type="checkbox" name="contactmethod"
value="inappchat" >
<label for="checkboxinappchat" class="widthclass" >
In-app chat </label>
</fieldset>
<input type="submit" value=Submit" >
</FORM>
<script
src="https://www.cse.ust.hk/~rossiter/dating_web_site.js
"></script>

Answer 1

You did not close label tag for email by mistake so it is open to the end of document as an inline block:
Wrong:
<label for="email" > Email: <label>
correct:
<label for="email" > Email: </label>

Answer 2

Your code is full of errors.
For example you have this multiple label openings...
<label for="email" > Email: <label> <input type="email"
id="email" name="email" required>
<br>
<label for="mobile"> Mobile: </label>
...and you don't close it anywhere.
Also you have something like this:
<input type="range" min="0" max="100" step="5"
name="height id=height" > <!-- it should be name="height" id="height" -->
Here is fixed code https://jsfiddle.net/3cxgb00g/
Try to use markup validators and advanced text editors which will show errors in your code.