Как обеспечить достаточное количество свободного места, чтобы избежать перемещения содержимого вниз страницы при появлении предупреждающего сообщения?

У меня есть приложение с рендерингом на стороне сервера (Django) со страницей входа, которая предоставляет поле имени пользователя и пароля, кнопку отправки, инструкции по забытому паролю и так далее. Это то, что я буду называть "основным содержимым".

Иногда над основным содержимым появляется дополнительный div с сообщением типа "Неверное имя пользователя или пароль". Я бы хотел, чтобы если пользователь вводит неверный логин и появляется это сообщение, основное содержимое не перемещалось. (Я знаю, что для этого придется оставить белое пространство над основным содержимым, но на этой странице и так много пустого пространства, так что это не имеет значения)

Я рассматривал возможность рендеринга

<div class="warning-message">Invalid username or password</div>

если требуется, и некий заполнитель

<div class="placeholder"></div>

иначе, но я пытался стилизовать их так, чтобы пустой div всегда был той же высоты, что и предупреждающее сообщение.

Я также рассматривал возможность размещения либо основного содержания, либо предупреждающего сообщения с position:absolute, но это иногда приводит к перекрытию на маленьких экранах.

   <div class="warning-message"

   {% if form.errors %}
   style="visibility: visible"
   {% else %}
   style="visibility: hidden"

   {% endif %}>