How to position input fields horizontally and not vertically?

Question

I have a wordpress register.php file from the buddyboss-platform(1.8.5).

And there are all input fields under each other, like this:

Lable Email
Input field email
lable password
input field password

But I want to have them next to each other. Like this

lable Email           lable password
input field Email     input field password

And of course I tried a lot. And googled a lot. But the input fields stay vertical and not horizontally

So this is the register.php file:

<?php



?>

<?php bp_nouveau_signup_hook('before', 'page'); ?>


<div id="register-page" class="page register-page">

    <?php bp_nouveau_template_notices(); ?>

    <?php bp_nouveau_user_feedback(bp_get_current_signup_step()); ?>


        <form action=""  name="signup_form" id="signup-form box" class="standard-form signup-form clearfix" method="post" enctype="multipart/form-data">


            <?php if ('request-details' === bp_get_current_signup_step()) : ?>


                <?php bp_nouveau_signup_hook('after', 'account_details'); ?>

                <div class="register-section default-profile" id="basic-details-section">


                    <?php /***** Basic Account Details ******/ ?>


                </div><!-- #basic-details-section -->



                <?php bp_nouveau_signup_hook('after', 'account_details'); ?>

                <?php /***** Extra Profile Details ******/ ?>

                <?php if (bp_is_active('xprofile') && bp_nouveau_base_account_has_xprofile()) : ?>

                    <?php bp_nouveau_signup_hook('before', 'signup_profile'); ?>

                    <div class="register-section extended-profile" id="profile-details-section">



                        <?php /* Use the profile field loop to render input fields for the 'base' profile field group */ ?>
                        <?php while (bp_profile_groups()) : bp_the_profile_group(); ?>


                            <?php while (bp_profile_fields()) : bp_the_profile_field();


                                if (function_exists('bp_member_type_enable_disable') && false === bp_member_type_enable_disable()) {
                                    if (function_exists('bp_get_xprofile_member_type_field_id') && bp_get_the_profile_field_id() === bp_get_xprofile_member_type_field_id()) {
                                        continue;
                                    }
                                }
                            ?>
                                <div<?php bp_field_css_class('editfield');
                                    bp_field_data_attribute(); ?> <fieldset>
                                    <?php
                                    $field_type = bp_xprofile_create_field_type(bp_get_the_profile_field_type());
                                    $field_type->edit_field_html();
                                    ?>
                                    </fieldset>

                    </div>

                <?php endwhile; ?>

                <input type="hidden" name="signup_profile_field_ids" id="signup_profile_field_ids" value="<?php bp_the_profile_field_ids(); ?>" />

            <?php endwhile; ?>

            <?php bp_nouveau_signup_form(); ?>

    <?php bp_nouveau_signup_hook('', 'signup_profile'); ?>

</div><!-- #profile-details-section -->

<?php bp_nouveau_signup_hook('after', 'signup_profile'); ?>

<?php endif; ?>

</div><!-- //.layout-wrap -->

<?php bp_nouveau_signup_terms_privacy(); ?>

<?php bp_nouveau_submit_button('register'); ?>

<?php endif; // request-details signup step 
?>

<?php bp_nouveau_signup_hook('custom', 'steps'); ?>

</form>

</div>

<?php bp_nouveau_signup_hook('after', 'page'); ?>

And I tried this in style.css

#box {
    display: flex;
    align-items: baseline;
  }

  #productSearch form input {
    vertical-align: middle;
}

But that doesn't worked.

And A side note. I also saw in the downloaded buddyboss-platform that the register.php has after the closing </form> an ending </div>. But without opening div. Is that legal?

My question. What I have to change? So that the two fields will shown horizontal?

Answer 1

This is mostly a CSS issue as buddypress is applying its own style.
Try using this (if it doesn't work, apply a higher specificity):

#basic-details-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 14px;
}

Higher specificity #register-page #signup-form #basic-details-section