Element position in grid

I have a three column grid.

On my center column, I have multiple form cards and I would like to have a "Next" button, to show the next card input.

But I don't know why, the "Next" button pass trough my card. I need to put a position: absolute, but I don't like it.

How I can do for the "Next button" take position relative from the card ?

Thank you

here is the codepen link : https://codepen.io/Beko6740/pen/xxqJVyg

<div class="wrapper">
<div class="form_level">The form level</div>

<div class="form">
    <form action="#" method="post">
        <div class="card" pannel="general">
            <p class="input_label">Firstname</p>
            <input type="text" name="firstname" required>

            <p class="input_label">Lastname</p>
            <input type="text" name="lastname" required>

            <p class="input_label">Predecessor</p>
            <input type="text" name="predecessor">
        </div>
    </form>

    <button class="card_next">Next</button>
</div>

<div class="form_summary">The summary of the form</div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    width: 100%;
    height: 100vh;
    background: linear-gradient(to bottom, #bea2e7 0%, #86b7e7 100%);
}

form {
    position: relative;
    padding: 15px;
    top: 50%;
    transform: translateY(-50%);
}

input:focus-visible {
    outline: none;
}

input {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid grey;
}

.input_label {
    margin-top: 15px;
    font-weight: 300;
}

.input_label:first-of-type {
    margin-top: 0px;
}

.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100vh, auto);
    grid-column-gap: 10px;
}

.card {
    width: 400px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}

.card_next{
    margin: 10px auto;
    width: 100px;
    height: 100px;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    background-color: white;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}

In red : My grid

In green: The place I would like to have my button.

Solution

I have added the button inside the form and display:flex; to the button...Here's the code..

    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Poppins", sans-serif;
    }
    
    body {
        width: 100%;
        height: 100vh;
        background: linear-gradient(to bottom, #bea2e7 0%, #86b7e7 100%);
    }
    
    form {
        position: relative;
        padding: 15px;
        top: 50%;
        transform: translateY(-50%);
    }
    
    input:focus-visible {
        outline: none;
    }
    
    input {
        width: 100%;
        padding: 10px;
        border-radius: 10px;
        border: 1px solid grey;
    }
    
    .input_label {
        margin-top: 15px;
        font-weight: 300;
    }
    
    .input_label:first-of-type {
        margin-top: 0px;
    }
    
    .wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(100vh, auto);
        grid-column-gap: 10px;
    }
    
    .card {
        width: 400px;
        margin: 0 auto;
        padding: 20px;
        background: #fff;
        border-radius: 15px;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
    }
    
    .card_next {
        margin: 10px auto;
        width: 100px;
        height: 100px;
        border-radius: 100px;
        border: none;
        cursor: pointer;
        background-color: white;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
    }
    
    .btn {
        display: flex;
        justify-content: center;
    }

<body>
    <div class="wrapper">
        <div class="form_level">The form level</div>

        <div class="form">
            <form action="#" method="post">
                <div class="card" pannel="general">
                    <p class="input_label">Firstname</p>
                    <input type="text" name="firstname" required>

                    <p class="input_label">Lastname</p>
                    <input type="text" name="lastname" required>

                    <p class="input_label">Predecessor</p>
                    <input type="text" name="predecessor">
                </div>

                <div class="btn">
                    <button class="card_next">Next</button>
                </div>

            </form>

        </div>

        <div class="form_summary">The summary of the form</div>
    </div>

</body>