How can I change the position of HTML inputs with a grid layout?

I have 4 Html inputs, in each line two. My problem is now: I can´t change the position of all of these inputs. The Css part looks so:

.calculator-menu-container {
    background-color: #1b1b23;
    width: 725px;
    height: 150px;
    border: #fff solid 2px;
    border-radius: 10px;
    position: absolute;
    top: 25%;
    margin: 10px;
    display: grid;
    grid-template-columns: 200px 200px;
    grid-template-rows: 75px 75px;
    gap: 0px 225px;
    justify-content: flex-start;
    align-items: flex-start;
}

.mint-price-input > input {
    border: #fff solid 2px;
    background-color: #1b1b23;
    width: 250px;
    height: 30px;
    position: absolute;
    top: 10;
    margin: 10px;
    border-radius: 5px;
    color: #fff;
}

.quantity-input > input {
    border: #fff solid 2px;
    background-color: #1b1b23;
    width: 250px;
    height: 30px;
    margin: 10px;
    border-radius: 5px;
    color: #fff;
}

.gas-limit-input > input {
    border: #fff solid 2px;
    background-color: #1b1b23;
    width: 250px;
    height: 30px;
    margin: 10px;
    border-radius: 5px;
    color: #fff;
}

.custom-interval-input > input {
    border: #fff solid 2px;
    background-color: #1b1b23;
    width: 250px;
    height: 30px;
    margin: 10px;
    border-radius: 5px;
    color: #fff;
}

This is the Html part for the inputs:

<div class="calculator-menu">
        <div class="calculator-menu-container">
            <div class="mint-price-input">
                <h2>Mint Price</h2>
                <input type="text" placeholder="Eth">
            </div>
            <div class="quantity-input">
                <h2>Quantity</h2>
                <input type="text" placeholder="Units of Tokens">
            </div> 
            <div class="gas-limit-input">
                <h2>Gas Limit</h2>
                <input type="text" placeholder="Units of Gas">
            </div>
            <div class="custom-interval-input">
                <h2>Custom Interval</h2>
                <input type="text">
            </div>
        </div>
    </div>

And my output looks so:

I don´t know now how can I move these 4 inputs more at the top from the container with the white border. What can I do? Have anyone an idea?

I searched already in the internet and tryed much things like "position" and much more. But anything wouldn´t worked.

Solution

remove position: absolute and top bottom ... properties then use margin-top and margin-bottom to move vertically