How to place 2 buttons at the left and right sides of the bottom of a div?

Question

I want to add the Back and Next buttons at the bottom of the screen with a fixed position. For my code, the button moves to the top/bottom of the screen if I change the screen size (I have attached the screenshot for both). Please check my code and help me solve this.

Code

    <div id="text-area">
        <p class="mb-4">
            <strong>Textarea</strong>
        </p>
        <textarea></textarea>
        <p class="d-flex justify-content-between">
            <button class="btn btn-link button" id="back">
                <i class="fa fa-long-arrow-alt-left me-3"></i>
                Back
            </button>
            <button class="btn btn-link button" id="next">
                Next
                <i class="fa fa-long-arrow-alt-right ms-3"></i>
            </button>
        </p>
    </div>

Answer 1

This solved my problem. Thanks all for your time. Happy coding.

<div class="d-flex flex-column flex-grow-1" id="text-area">
    <div class="flex-grow-1">
        <p class="mb-4">
            <strong>Textarea</strong>
        </p>
        <textarea></textarea>
    </div>
    <p class="d-flex justify-content-between">
        <button class="btn btn-link button" id="back">
            <i class="fa fa-long-arrow-alt-left me-3"></i>
            Back
        </button>
        <button class="btn btn-link button" id="next">
            Next
            <i class="fa fa-long-arrow-alt-right ms-3"></i>
        </button>
    </p>
</div>