After extensively searching this forum, I couldn't find a solution to my bootstrap issue. Here's the code for two 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>
This structure can be seen here. However, when the window size is reduced and the second column text wraps into two lines, the layout appears incorrect.
Take a look at the incorrect layout. My goal is to have both input boxes aligned at the same height.