JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

 
 <div class="row justify-content-md-center">
    <div class="col-sm-6">
      <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>
    </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>