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 >
<div >
<form method="POST">
<h3 align="center">Join a group</h3>
<div >
<input
type="input"
id="groupCode"
name="groupCode"
placeholder="Fill in the group code"
/>
</div>
<button
type="submit"
id="form-submit-join"
name="form-submit-join"
>
Join
</button>
</form>
</div>
<div >
<form method="POST">
<h3 align="center">Create a new group long text</h3>
<div >
<input
type="input"
id="groupName"
name="groupName"
placeholder="Fill in the groupname"
/>
</div>
<button
type="submit"
id="form-submit-create-family"
name="form-submit-create-family"
>
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.
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
CodePudding user response：
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" >
<h3 align="center">Join a group</h3>
<div>
<div >
<input
type="input"
id="groupCode"
name="groupCode"
placeholder="Fill in the group code"
/>
</div>
<button
type="submit"
id="form-submit-join"
name="form-submit-join"
>
Join
</button>
</div>
</form>