Bootstrap heigth issue

Issue

I'm new to bootstrap and search a lot on this forum but couldn't find an answer to my question I have the following code for 2 forms on my page

  <div class="row justify-content-md-center">
    <div class="col-sm-6">
      <form method="POST">
        <h3 align="center">Join a group</h3>
        <div class="form-group">
          <input
            type="input"
            class="form-control"
            id="groupCode"
            name="groupCode"
            placeholder="Fill in the group code"
          />
        </div>
        <button
          type="submit"
          id="form-submit-join"
          name="form-submit-join"
          class="btn btn-primary"
        >
          Join
        </button>
      </form>
    </div>
    <div class="col-sm-6">
      <form method="POST">
        <h3 align="center">Create a new group long text</h3>
        <div class="form-group">
          <input
            type="input"
            class="form-control"
            id="groupName"
            name="groupName"
            placeholder="Fill in the groupname"
          />
        </div>
        <button
          type="submit"
          id="form-submit-create-family"
          name="form-submit-create-family"
          class="btn btn-primary"
        >
          Create
        </button>
      </form>
    </div>
  </div>
</div>

This looks like this 2 columns that looks the same

when I make the window smaller so that the long text of the second column becomes 2 lines, the layout is wrong.

wrong layout

I would like it to be the same, so the input box of the first one should be on the same height as the second one

Solution

You can use flex for that!

I've added the flex classes to the form and an extra div as wrapper around everything but the headline to let 'justify-content-between' do its magic and push the headline and the div apart.

<form method="POST" class="h-100 d-flex flex-column justify-content-between">
    <h3 align="center">Join a group</h3>
    <div>
        <div class="form-group mt-auto">
        <input
          type="input"
          class="form-control"
          id="groupCode"
          name="groupCode"
          placeholder="Fill in the group code"
        />
        </div>
        <button
          type="submit"
          id="form-submit-join"
          name="form-submit-join"
          class="btn btn-primary"
        >
          Join
        </button>
    </div>
</form>

https://jsfiddle.net/1jzgohs4/

Answered By - ColdIV