Flexbox grow is not making one element fill all of the empty space, and some magic whitespace is bei-CodePudding

I want to achieve it so that the email box stretches all the way and touches the sign up button.

Here is my code which I have used to try and do it right now:

<div >
    <h1 >A better way to</h1>
    <h1 >store your code</h1>

    <div >
        <p >With RepoZoid, storing your own code is as easy as pie. Just add a new entry, paste your code in - and you're off to the races.</p>
        <p>It's as simple as 1, 2, 3 - with sharing options and more coming in the future!</p>
    </div>

    <div >
        <div >
            <input  placeholder="Enter your email" type="email" name="emailinput">
        </div>

        <div >
            <button >Sign Up</button>
        </div>
    </div>
</div>

Am I doing anything wrong?

Kind Reguards,
Henry.

CodePudding user response：

Based on AngelSalazar's comment:
The wrapper div for the button should not have grow. Instead of flex grow justify-end, use ml-4.