Вручную добавить ошибки формы между входами

Question

Я оставил некоторое пространство между входами, потому что я хочу вручную добавить ошибки формы, однако под сообщением об ошибке появляется дополнительное пространство.Я пытаюсь сделать сообщение об ошибке точно подходящим доступным пространством без изменения размера формы.Это происходит потому, что я применил padding-bottom: 10px; к своему <td>, но я не уверен, как я мог бы сделать это иначе.Я попытался использовать CSS-сетку вместо таблицы и установить grid-row-gap: 10px;, но результат был аналогичным.Как сделать так, чтобы сообщение об ошибке соответствовало доступному пространству без изменения размера формы?Сообщение об ошибке имеет следующий формат:

<ul class='errorlist'>
    <li>Please use another email, this one is already taken.</li>                       
</ul>

... и не существует до тех пор, пока не будет нажата кнопка и не будет отправлена ​​неверная форма.

Вот мой код:

forms.py

from django import forms
from django.contrib.auth.models import User


class RegistrationForm(forms.ModelForm):
    email = forms.EmailField(max_length=200, help_text='Required')
    password = forms.CharField(label='Password', widget=forms.PasswordInput)
    password2 = forms.CharField(label='Repeat password', widget=forms.PasswordInput)

    class Meta:
        model = User
        fields = ('username', 'email', 'first_name', 'last_name')

    def clean_password2(self):
        cd = self.cleaned_data
        if cd['password'] != cd['password2']:
            raise forms.ValidationError('Passwords do not match.')
        return cd['password2']

    def clean_email(self):
        email = self.cleaned_data['email']
        if User.objects.filter(email=email).exists():
            raise forms.ValidationError(
                'Please use another Email, that is already taken')
        return email

register.html

{% extends 'pages/base.html' %}

{% load static %}

{% block cssfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'accounts/css/register.css' %}">
{% endblock %}

{% block content %}
<div class="register-container">
    <div class="above-form">
        Create your account. It is free and only takes a minute.
    </div>
    <form action="." method="post">
        {% csrf_token %}
        <table>
            {{ form.non_field_errors }}
            <tr>
                <th>
                    <label for="{{ form.first_name.id_for_label }}">First Name:</label>
                </th>
                <td>
                   {{ form.first_name }}
                   {{ form.first_name.errors }}
                </td>
            </tr>
            <tr>
                <th>
                    <label for="{{ form.last_name.id_for_label }}">Last Name:</label>
                </th>
                <td>
                    {{ form.last_name }}
                    {{ form.last_name.errors }}
                </td>
            </tr>
            <tr>
                <th>
                    <label for="{{ form.email.id_for_label }}">Email:</label>
                </th>
                <td>
                    <div data-tip="we don't share your e-mail, it's for communication purposes only">
                        <span></span>
                        {{ form.email }}
                        {{ form.email.errors }}
                    </div>
                </td>
            </tr>
            <tr>
                <th>
                    <label for="{{ form.username.id_for_label }}">Username:</label>
                </th>
                <td>
                    {{ form.username }}
                    {{ form.username.errors }}
                </td>
            </tr>
            <tr>
                <th>
                    <label for="{{ form.password.id_for_label }}">Password:</label>
                </th>
                <td>
                    {{ form.password }}
                    {{ form.password.errors }}
                </td>
            </tr>
            <tr>
                <th>
                    <label for="{{ form.password2.id_for_label }}">Repeat Password:</label>
                </th>
                <td>
                    {{ form.password2 }}
                    {{ form.password2.errors }}
                </td>
            </tr>
        </table>
        <button type="submit" class="button-register-now">Register Now</button>
    </form>
</div>
{% endblock %}

register.css

.content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: auto;
    margin-top: 15px;
    width: 960px;
}

.content form {
    background-color: #f5f3f2;
    box-shadow: 0 8px 6px -6px black;
    width: 100%;
 }

.content form label {
    display: block;
    text-align: right;
    margin-left: 30px;
}

.content form input {
    margin-left: 15px;
    width: 100%;
}

.errorlist {
    margin-top: 0px;
    margin-bottom: 0px;
}

.errorlist li {
    font-size: 10px;
    margin-left: 15px;
    margin-top: 0px;
    margin-bottom: 0px;
}

td {
    padding-bottom: 10px;
}

#id_first_name {
    margin-top: 20px;
}

.register-cointainer {
    width: 900px;
}

.button-register-now {
    border-style: solid;
    border-radius: 0.5em;
    background-color: #FF9900;
    color: white;
    margin-left: 168px;
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 10px 32px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
}

.button-register-now:hover {
    background-color: #FF6600;
    color: white;
    text-decoration: none;
}

[data-tip] {
    position: relative;

}

[data-tip]::before {
    content: '';
    display: none;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid white;
    position: absolute;
    top: -10px;
    left: 30px;
    z-index: 10;
    font-size: 1em;
    line-height: 2em;
    width: 0;
    height: 0;
}

[data-tip] > span {
    display: none;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 16px solid #777;
    position: absolute;
    top: -9px;
    left: 29px;
    z-index: 7;
    font-size: 1em;
    line-height: 2em;
    width: 0;
    height: 0;

}

[data-tip]::after {
    display: none;
    content: attr(data-tip);
    position: absolute;
    top: -54px;
    left: 15px;
    border: 1px solid #777;
    padding: 0 20px;
    background-color: white;
    color: #777;
    z-index: 9;
    font-size: 0.75em;
    height: 4em;
    text-align: center;
    line-height: 4em;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: normal;
}

[data-tip]:focus-within > span,
[data-tip]:focus-within::before,
[data-tip]:focus-within::after {
    opacity: 1;
    display: block;
}