Contact Form Mixed Up - html

Question

My "Reason for Contacting" and "Comment" boxes seem to be flipped and on different lines.
label {
float: left;
text-align: right;
width: 10em;
padding-right: 1em;
}
input,
textarea {
display: block;
margin-bottom: 2em;
}
input[type="submit"] {
margin-left: 6em;
}
form {
color: red;
}
<main>
<h2>Contact Us</h2>
<p>Required fields are marked with an asterisk *</p>
<form>
<label for="myName">*Name:</label>
<input type="text" id="myName" name="myName" required="required">
<label for="myEmail">*E-mail: </label>
<input type="email" id="myEmail" name="myEmail" required="required">
<label for="myPhone">Phone: </label>
<input type="tel" id="myPhone" name="myPhone">
<label for="reason">*Reason For Contacting:</label>
<select class="reason">
<option value="join">Interest in Joining</option>
<option value="sponsor">Sponsorship</option>
<option value="other">Other</option>
</select>
<label for="myComments">Comments:</label>
<textarea id="myComments" name="myComments" rows="2" cols="30"></textarea>
<input type="submit" value="Submit">
</form>
</main>

Answer 1

From your css I can see that you have given float: left to the label. So, the label floats left, leaving space on the right for the next element. But, the input is given display: block, which occupies the whole remaining place to right.
But the select element is display: inline by default. Hence, they seem to be mixed up. Just add display: block to select too.
label {
float: left;
text-align: right;
width: 10em;
padding-right: 1em;
}
select,/* add this */
input,
textarea {
display: block;
margin-bottom: 2em;
}
input[type="submit"] {
margin-left: 6em;
}
form {
color: red;
}
<main>
<h2>Contact Us</h2>
<p>Required fields are marked with an asterisk *</p>
<form>
<label for="myName">*Name:</label>
<input type="text" id="myName" name="myName" required="required">
<label for="myEmail">*E-mail: </label>
<input type="email" id="myEmail" name="myEmail" required="required">
<label for="myPhone">Phone: </label>
<input type="tel" id="myPhone" name="myPhone">
<label for="reason">*Reason For Contacting:</label>
<select name="reason" class="reason">
<option value="join">Interest in Joining</option>
<option value="sponsor">Sponsorship</option>
<option value="other">Other</option>
</select>
<label for="myComments">Comments:</label>
<textarea id="myComments" name="myComments" rows="2" cols="30"></textarea>
<input type="submit" value="Submit">
</form>
</main>

Answer 2

The issue here is because you have labels set to float: left; and elements that have no floats set at all so it's disrupting the flow.
Easiest way to fix this is to break elements up into fieldsets.
fieldset {
border: none;
width: 100%;
padding: 0;
float: left;
display: block;
}
label {
float: left;
text-align: right;
width: 10em;
padding-right: 1em;
}
input,
textarea {
display: block;
margin-bottom: 2em;
}
input[type="submit"] {
margin-left: 6em;
}
form {
color: red;
}
<main>
<h2>Contact Us</h2>
<p>Required fields are marked with an asterisk *</p>
<form>
<fieldset>
<label for="myName">*Name:</label>
<input type="text" id="myName" name="myName" required="required">
</fieldset>
<fieldset>
<label for="myEmail">*E-mail: </label>
<input type="email" id="myEmail" name="myEmail" required="required">
</fieldset>
<fieldset>
<label for="myPhone">Phone: </label>
<input type="tel" id="myPhone" name="myPhone">
</fieldset>
<fieldset>
<label for="reason">*Reason For Contacting:</label>
<select class="reason">
<option value="join">Interest in Joining</option>
<option value="sponsor">Sponsorship</option>
<option value="other">Other</option>
</select>
</fieldset>
<fieldset>
<label for="myComments">Comments:</label>
<textarea id="myComments" name="myComments" rows="2" cols="30"></textarea>
</fieldset>
<fieldset>
<input type="submit" value="Submit">
</fieldset>
</form>
</main>