How to display two form elements next to eachother?

Question

I'm trying to create a login form where I want the checkbox "Remember me" and the link "Password?" next to eachother, in current situation they are below eachother:

Code:

.form-group {
    display: block !important;
    margin: 0 auto !important;
    max-width: 75% !important;
    margin-bottom: 5% !important;
}

 <div class="form-group">
           <div class="checkbox">
                  <label asp-for="Input.RememberMe">
                      <input asp-for="Input.RememberMe" />
                          @Html.DisplayNameFor(m => m.Input.RememberMe)
                  </label>
            </div>
            <p>
                <a id="forgot-password" asp-page="./ForgotPassword">Password?</a>
            </p>
    </div>


    

How can i achieve this?

Thanks

Answer 1

Use the inline-block. After that use padding to center both in the middle.

Because you are using !important many times, I added it also on the class below.

.d-inline-block {
  display: inline-block !important;
}

<div class="form-group">
  <div class="checkbox d-inline-block">
    <label asp-for="Input.RememberMe">
      <input asp-for="Input.RememberMe" />
      @Html.DisplayNameFor(m => m.Input.RememberMe)
    </label>
  </div>
  <div class="d-inline-block">
    <a id="forgot-password" asp-page="./ForgotPassword">Password?</a>
  </div>
</div>