Build a Survey Form - I have some problems about 2 things

HTML-CSS
1

Tell us what’s happening:

I don’t know how to place the texts and inputs like this:“https://codepen.io/freeCodeCamp/full/VPaoNP”,
and i don’t know how to do the 6th - User Story #6: If I enter an email that is not formatted correctly, I will see an HTML5 validation error.

Your code so far

My code is here:

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0.

Link to the challenge:

2

Use required in email tag

3

don’t forget to add

type="email"
4

for laying out your inputs as in the example i would group the label and input under one div so,
instead of:

<div>
<label id="name-label" for="name">* Name: </label>
</div>
<div>
<input autofocus type="text" name="name" id="name" required placeholder="Enter your name"><br>
</div>

you can just have:

<div class="input-group">
  <label id="name-label" for="name">* Name: </label>
  <input autofocus type="text" name="name" id="name" required placeholder="Enter your name"><br>
</div>

and style that input-group class something like:

.input-group {
  display: flex;
  align-items: center;
  padding: 5px;
}
.input-group label {
  flex-basis: 30%;
  text-align: right;
  padding-right: 10px;
}
.input-group input {
  flex-basis: 70%;
  text-align: left;
  padding: 5px;
}