how to show two input fields next to each other in wordpress?

Question

I try to get just two input fields next to eacht other. I have six input fields. And four are in line with each other. But there are two are not in line. I just cant fix this.

So this is my css:

.register-section-form, .editfield.field_3.field_gebruikersnaamnickname,.bb-signup-field.signup_email   {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 14px;
} 



.bb-signup-field.signup_password,
.bb-signup-field.signup_password_confirm {

  display: inline-block;
  min-width: 48.8%;
  grid-column-gap: 14px;
}

So it is about nickname and email. They are not inline.

I just can't fix that.

So it looks like this:

This is the html:

<form action="" name="signup_form" id="signup-form" class="standard-form signup-form " method="post" enctype="multipart/form-data">
   <div>
      <div class="register-section default-profile" id="basic-details-section">
      </div>
      <!-- #basic-details-section -->
      <div class="register-section extended-profile  register-section-form  " id="profile-details-section">
         <div  class="editfield field_1 field_voornaam field_order_0 required-field visibility-public field_type_textbox" data-index="0" ">
            <fieldset>
               <div>
                  <legend id="field_1-1">
                     <style>{font-family:bold}</style>
                     Voornaam                                               
                  </legend>
                  <input  id="field_1" name="field_1" type="text" value="" aria-required="true" aria-labelledby="field_1-1" aria-describedby="field_1-3">
               </div>
            </fieldset>
         </div>
         <div  class="editfield field_2 field_achternaam field_order_1 required-field visibility-public alt field_type_textbox" data-index="1" ">
            <fieldset>
               <div>
                  <legend id="field_2-1">
                     achternaam                                             
                  </legend>
                  <input  id="field_2" name="field_2" type="text" value="" aria-required="true" aria-labelledby="field_2-1" aria-describedby="field_2-3">
               </div>
            </fieldset>
         </div>
         <div  class="editfield field_3 field_gebruikersnaamnickname field_order_2 required-field visibility-public field_type_textbox" data-index="2" ">
            <fieldset>
               <div>
                  <legend id="field_3-1">
                     Gebruikersnaam(nickname)                                               
                  </legend>
                  <input  id="field_3" name="field_3" type="text" value="" aria-required="true" aria-labelledby="field_3-1" aria-describedby="field_3-3">
               </div>
            </fieldset>
         </div>
         <input type="hidden" name="signup_profile_field_ids" id="signup_profile_field_ids" value="1,2,3" />
      </div>
      <!-- #profile-details-section -->
      <div class="bb-signup-field signup_email">
         <label for="signup_email">Email </label><input type="email" name="signup_email" id="signup_email"  value=""   aria-required="true" />          
         <div id="email-strength-result"></div>
      </div>
      <div class="bb-signup-field signup_password">
         <label for="signup_password">Password </label>
         <div class="bb-password-wrap"><a href="#" class="bb-toggle-password"><i class="bb-icon-eye"></i></a><input type="password" name="signup_password" id="signup_password"  class="password-entry" value=""   aria-required="true" spellcheck="false" autocomplete="off" /></div>
         <div id="pass-strength-result"></div>
      </div>
      <div class="bb-signup-field signup_password_confirm">
         <label for="signup_password_confirm">Confirm Password </label>
         <div class="bb-password-wrap"><a href="#" class="bb-toggle-password"><i class="bb-icon-eye"></i></a><input type="password" name="signup_password_confirm" id="signup_password_confirm"  class="password-entry-confirm" value=""   aria-required="true" spellcheck="false" autocomplete="off" /></div>
      </div>
   </div>
   <!-- //.layout-wrap -->  
</form>

Answer 1

Based on your provided HTML using Flex: https://jsfiddle.net/r4wjczn6/

.register-section{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.editfield {
  width: 100%;
}

.field_1, .field_2{
  width: 50%;
}

Based on your provided HTML using Grid: https://jsfiddle.net/jqL2d941/

.register-section{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.editfield {
  grid-column: 1 / span 2;
}

.field_1{
  grid-column: 1 / span 1;
}

.field_2{
  grid-column: 2 / span 1;
}