Совместите два столбца ввода в одной строке «Имя» и «Фамилия» с их сообщениями об ошибках и метками

Question

В течение пяти дней я пытался выровнять два поля ввода, их метки и сообщения об ошибках, чтобы они были в одной строке (Имя и Фамилия), но после поиска в стеке и попыток других вариантов использования они не сработали. Я думал, что просто опубликую код, который у меня есть на данный момент, и посмотрю, сможет ли кто-нибудь посоветовать, что нужно исправить, чтобы мои поля ввода выстроились в линию. Я попытался CSS сетки без успеха. Код находится в div "fullname", но я включил окружающий код, который может повлиять на мои настройки.

#fullname {
  display: flex;
  flex-direction: row;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 100%;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-areas: 'firstLabel' 'firstError' 'lastLabel' 'lastError' 'fname' 'fname' 'lname' 'lname'
}

#firstLabel {
  display: grid;
  grid-area: firstlabel;
}

#firstError {
  display: grid;
  grid-area: firstError;
}

#lastLabel {
  display: grid;
  grid-area: lastLabel;
}

#lastError {
  display: grid;
  grid-area: lastError;
}

#fname {
  display: grid;
  grid-area: fname;
  max-width: 100px;
}

#lname {
  display: grid;
  grid-area: lname;
  max-width: 100px;
}


/*Register Button div*/

#register_button {
  text-align: center;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
  padding: 15px;
  width: 50%;
}


/*Register Form div*/

#register_form {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  border-radius: 5px;
  padding: 15px;
  width: 50%;
}

#register {
  font-family: Rajdhani, sans-serif;
  font-size: 14px;
  font-weight: bolder;
  width: 50%;
  background-color: #000;
  color: white;
  padding: 15px 20px;
  margin: 10px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=text],
input[type=date],
select {
  font-family: Rajdhani, sans-serif;
  font-size: 16px;
  width: 50%;
  padding: 5px 20px;
  margin: 10px 25%;
  display: block;
  border: 1px solid #ccc;
  border-radius: 15px;
  box-sizing: border-box;
}

<div id="register_form" class="Hidden">
  <form id="reg_input" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']) ?>" method="POST">

    <!-- Required Fields -->
    <span class="Error">* All fields are required</span>
    <br><br>

    <div id="fullname">
      <!-- First Name -->
      <label id="firstLabel" for="fname">First Name</label>
      <span id="firstError" class="Error">* <?php echo $fnameErr;?></span>
      <br>
      <label id="lastLabel" for="lname">Last Name</label>
      <span id="lastError" class="Error">* <?php echo $lnameErr;?></span>
      <br>
      <input type="text" id="fname" name="firstname" placeholder="e.g. Reggie" />
      <input type="text" id="lname" name="lastname" placeholder="e.g. Rocket" />
    </div>

    <!-- Email -->
    <label for="email">Email</label>
    <span class="Error">* <?php echo $emailErr;?></span>
    <br>
    <input type="text" id="email" name="Email" placeholder="regge.rocket@llf.com " />


    <!-- Date of Birth -->
    <label for="dateOfBirth">Date of Birth</label>
    <span class="Error">* <?php echo $dateOfBirthErr;?></span>
    <br>
    <input type="date" id="dateOfBirth" name="dateOfBirth" value="<?php echo date('Y-m-d'); ?>" />

    <!-- Nation of Origin -->
    <label for="nationOfOrigin">Nation of Origin</label>
    <span class="Error">* <?php echo $nationOfOriginErr;?></span>
    <br>
    <select id="nationOfOrigin" name="nationOfOrigin">
      <option value="">--Select--</option>
      <option value="AF">Afghanistan</option>
    </select>

    <!-- Submit Button -->
    <input type="submit" value="Submit" id="submitButton" name="submitButton">

  </form>
</div>

Я ценю любую помощь, которую могу получить!

Answer 1

Сделал небольшие изменения в вашем коде, и вот что я придумал с этим

#fullname {
  display: grid;
  grid-template-columns: auto auto;
}
#fullname > div {
  padding: 0 2px;
}

/*Register Button div*/

#register_button {
  text-align: center;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
  padding: 15px;
  width: 50%;
}

/*Register Form div*/

#register_form {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  border-radius: 5px;
  padding: 15px;
  width: 50%;
}

#register {
  font-family: Rajdhani, sans-serif;
  font-size: 14px;
  font-weight: bolder;
  width: 50%;
  background-color: #000;
  color: white;
  padding: 15px 20px;
  margin: 10px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type="text"],
input[type="date"],
select {
  font-family: Rajdhani, sans-serif;
  font-size: 16px;
  width: 100%;
  padding: 5px 20px;
  margin: 10px;
  display: block;
  border: 1px solid #ccc;
  border-radius: 15px;
  box-sizing: border-box;
}

<div id="register_form" class="Hidden">
  <form id="reg_input" action="<?php echo 
 htmlspecialchars($_SERVER['PHP_SELF']) ?>" method="POST">

    <!-- Required Fields -->
    <span class="Error">* All fields are required</span>
    <br><br>

    <div id="fullname">
      <!-- First Name -->
      <div>
        <label id="firstLabel1" for="fname">First Name</label>
        <span id="firstError1" class="Error">* <?php echo $fnameErr;?></span>
        <input type="text" id="fname" name="firstname" placeholder="e.g. Reggie" />
      </div>

      <!-- Last Name -->
      <div>
        <label id="lastLabel1" for="lname">Last Name</label>
        <span id="lastError1" class="Error">* <?php echo $lnameErr;?></span>
        <input type="text" id="lname" name="lastname" placeholder="e.g. Rocket" />
      </div>
    </div>

    <!-- Email -->
    <label for="email">Email</label>
    <span class="Error">* <?php echo $emailErr;?></span>
    <br>
    <input type="text" id="email" name="Email" placeholder="regge.rocket@llf.com " />

    <!-- Date of Birth -->
    <label for="dateOfBirth">Date of Birth</label>
    <span class="Error">* <?php echo $dateOfBirthErr;?></span>
    <br>
    <input type="date" id="dateOfBirth" name="dateOfBirth" value="<?php echo date('Y-m-d'); ?>" />

    <!-- Nation of Origin -->
    <label for="nationOfOrigin">Nation of Origin</label>
    <span class="Error">* <?php echo $nationOfOriginErr;?></span>
    <br>
    <select id="nationOfOrigin" name="nationOfOrigin">
      <option value="">--Select--</option>
      <option value="AF">Afghanistan</option>
    </select>

    <!-- Submit Button -->
    <input type="submit" value="Submit" id="submitButton" name="submitButton">

Эта ссылка на CodePen . решения

Answer 2

Почему бы вам просто не воспользоваться сеткой bootstrap?

https://getbootstrap.com/docs/4.0/layout/grid/

Таким способом можно получить контейнер и легко его разбить:

<div class="container">
  <div class="col-md-6>
    <input type="text" id="fname" name="firstname" placeholder="e.g. Reggie"/>
  </div>
  <div class="col-md-6">
    <input type="text" id="lname" name="lastname" placeholder="e.g. Rocket"/>
  </div>
</div>

Таким образом, вы можете легко выстроить и систематизировать все ваши поля, и это будет отзывчивым для тех, кто использует мобильные телефоны или планшеты.

РЕДАКТИРОВАТЬ:

Вы можете попробовать это вместо этого. Иметь первый и последний в 2 отдельных дел:

<div id="fullname">
  <div id="firstname" style="width: 50%">
      <label id="firstLabel" for="fname">First Name</label>
      <span id="firstError" class="Error">* <?php echo $fnameErr;?></span>
      <input type="text" id="fname" name="firstname" placeholder="e.g. Reggie" />
  </div>
  <div id="lastname" style="width: 50%">      
      <label id="lastLabel" for="lname">Last Name</label>
      <span id="lastError" class="Error">* <?php echo $lnameErr;?></span>
      <input type="text" id="lname" name="lastname" placeholder="e.g. Rocket" />
  </div>
</div>