How to place div at the bottom?

I have this rather simple setup, and would just like to move the outer div (neumorphic-input) to the bottom of my page. How can I do this using the current CSS I have.

I am currently using the CSS to align the two elements in the dive side by side and horizontally centred on my page.

HTML:

<body class="body">

    <div class="neumorphic-input">
        <textarea class="text-input" id="text-input" placeholder="Enter your message"></textarea>
        <button class="send-button">Send</button>
    </div>

</body>

CSS:

.neumorphic-input {
  display: flex;
  flex-direction: row;
  justify-content: center;

}

Solution

You can use min-height: 100vh; and some flexbox to position it at the bottom of the screen:

.neumorphic-input {
  display: flex;
  flex-direction: row;
  justify-content: center;

}

body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
}

<body class="body">

    <div class="neumorphic-input">
        <textarea class="text-input" id="text-input" placeholder="Enter your message"></textarea>
        <button class="send-button">Send</button>
    </div>

</body>