Помогите сделать такую форму

Question

Не могу правильно позиционировать элементы. Приложил скриншот как должно выглядеть. На скрине поле email занимает ширину двух полей. У меня оно почему то выталкивает верхнее поле и получается чёрти что.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>7</title>
</head>
<body>
    <header>Create Account</header>
    <form>
        <table border>
            <tr>
                <td>
                    <label for="first-name">First name*</label>
                </td>
                <td>
                    <label for="last-name">Last name</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" required id="first-name" name="first-name" placeholder="enter your first name">
                </td>
                <td>
                    <input type="text" placeholder="enter your last name" id="last-name" name="last-name">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="email">Email*</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" placeholder="enter your email"id="email" name="email">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

body {
    margin: 0 auto;
}

header {
    font-family: verdana;
    font-weight: bold;
    text-align: center;
    font-size: 28px;
    background-color: whitesmoke;
    height: 70px;
}

label {
    color: aquamarine;
    font-family: verdana;
    font-weight: bold;
}

input {
    width: 230px;
    height: 30px;
}

form {
    display: flex;
    justify-content: center;
}

#email {
    width: 460px;
}

Answer 1

если делать в форме таблицы то для корректного отображения тебе надо объединять ячейки (как посоветовал Алекс)

либо работай через div с указанием их ширины в % от формы

<div> 
  <h2>Email</h2>
  <input type="text" size="20" name="Email">
</div> 
<div> 
  <h2>last-name</h2>
  <input type="text" size="20" name="last-name">
</div>
<div>
   <h2>Email</h2>
   <input type="text" size="40" name="Email">
</div>

Ширина первых двух дивов 50% третьего 100% (ну и с паддингом или маргином формы/инпутов поиграйся так же в % укажи чтоб выровнять), только ширину формы задай.

Answer 2

Обычная табличная вёрстка... В паре мест, применяется объединение ячеек, с помощью атрибута colspan:

table {
  border-collapse: collapse;
  margin: 5px auto;
  font: bold 14px/1em Arial;
  background-color: #fefefe;
  box-shadow: 0 0 12px 12px #fefefe;
}

th, tfoot td { background-color: #f2f3f5; }

td {
  width: 250px;
  padding: 5px;
}

tfoot td { text-align: right; }

p {
  margin: 5px 0 2px;
  font: bold 14px/1em Arial;
  color: #1eb690;
}

div {
  display: flex;
  flex-flow: row nowrap;
}

label {
  white-space: nowrap;
  color: #787878;
}

input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]), select, textarea {
  height: 25px;
  width: 100%;
  box-sizing: border-box;
}
textarea { height: 4em; }

input[type="submit"] {
  height: 40px;
  padding: 1em;
  border: none;
  border-radius: 8px;
  font: bold 14px/1em Arial;
  background-color: #1eb690;
  color: #79e8d0;
}

<table>
  <thead>
    <tr>
      <th colspan="2"><h1>Create Account</h1></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><p>First name*</p><input type="text"></td>
      <td><p>Last name</p><input type="text"></td>
    </tr>
    <tr>
      <td colspan="2"><p>Email*</p><input type="email"></td>
    </tr>
    <tr>
      <td><p>Password*</p><input type="password"></td>
      <td><p>Confirm Password*</p><input type="password"></td>
    </tr>
    <tr>
      <td>
        <p>Gender</p>
        <div><label><input type="radio"> Male</label><label><input type="radio"> Female</label></div>
      </td>
      <td>
        <p>Hobbles</p>
        <div><label><input type="checkbox"> Music</label><label><input type="checkbox"> Sport</label><label><input type="checkbox"> Travel</label><label><input type="checkbox"> Movies</label></div>
      </td>
    </tr>
    <tr>
      <td>
        <p>Source of Income</p>
        <select>
          <option>Пункт 1</option>
          <option>Пункт 2</option>
        </select>
      </td>
      <td><p>Income</p><input type="range"></td>
    </tr>
    <tr>
      <td><p>Upload Profile Picture</p><input type="file"></td>
      <td><p>Age</p><input type="number"></td>
    </tr>
    <tr>
      <td colspan="2"><p>Bio</p><textarea></textarea></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2"><input type="submit" value="Create"></td>
    </tr>
  </tfoot>
</table>

БЛОГ НА HUSL

Помогите сделать такую форму

Ответы (2 шт):