Holding place for appendChild node in HTML form to not cause the following elements pushed down below

Appending the child node to the form is pushing the footer down a little to make room for it. How can I hold the place for the child node beforehand so that my footer is not pushed down while the message is fading in place?

CSS

.containerForm {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
}

    .containerForm h1 {
        text-align: center;
    }

    .containerForm .form-group {
        margin-bottom: 15px;
    }

    .containerForm label {
        display: block;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .containerForm input, textarea {
        width: 100%;
        padding: 10px;
        border-radius: 5px;
        border: 1px solid #ccc;
    }

    .containerForm button {
        display: block;
        width: 100%;
        padding: 10px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

        .containerForm button:hover {
            background-color: #45a049;
        }

.success-message {
    margin-top: 10px;
    color: #4CAF50;
    font-weight: bold;
    text-align: center;
    animation: fadeIn 3s ease-in-out;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

This will be the handling method in JS. Please note currently the method is simulating as if there is a submission process in action.
JS

document.getElementById("contact-form").addEventListener("submit", function (event)
 {
    event.preventDefault(); 

    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;
    var message = document.getElementById("message").value;

    var submitButton = document.querySelector("button[type='submit']");
    submitButton.disabled = true;

    // TODO: invoke controller method.

    // Simulating a processing delay
    setTimeout(function () {
        submitButton.disabled = false;

        var successMessage = document.createElement("p");
        successMessage.textContent = "Thank you, your message has been sent.";
        successMessage.classList.add("success-message");

        document.getElementById("contact-form").appendChild(successMessage);

        // Reset the form fields after a delay
        setTimeout(function () {
            document.getElementById("contact-form").reset();
            successMessage.remove();
        }, 3000);
        
    }, 2000);
});

Mark up for the form.
HTML

<main>  
    <div class="containerForm">
        <h1>Contact Us</h1>
        <form id="contact-form">
            <div class="form-group">
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="message">Message:</label>
                <textarea id="message" name="message" required></textarea>
            </div>
            <button type="submit">Submit</button>          
        </form>
    </div>
</main>
<footer>
    <p>&copy; XYZ. All rights reserved.</p>
</footer>