Django forms - выравнивание CSS

Я довольно новичок в CSS, однако у меня есть django modelformset_factory, который мне нужно отобразить и выровнять все отображаемые поля в одну линию для каждого поля, у него есть TextArea и Textinput, проблема в соответствии с прикрепленной картинкой, я пытался выровнять все, но они никогда не выравниваются вместе.

Вот мое мнение:

from django.forms import modelformset_factory
def form_employee(request, employee_id):
    employee = Employee.objects.get(pk=employee_id)
    Employee_PM = PMF.objects.filter(badge=employee_id)
    for pm in Employee_PM:
        form_reference = pm.form_ref
    emp_form = PMF_Form.objects.filter(form_ref=form_reference)
    emp_summary = PMF_Summary.objects.filter(badge=employee_id)
    PMF_formset = modelformset_factory(PMF_Form, fields=('objective','obj_desc','rating',), extra=0)
    formset = PMF_formset(queryset=PMF_Form.objects.filter(form_ref=form_reference))
    if request.method == "POST":
        formset = PMF_formset(request.POST, queryset=PMF_Form.objects.filter(form_ref=form_reference))
        if formset.is_valid():
            formset.save()
            return redirect('/')
    for form in formset:
        form.fields['objective'].widget.attrs['disabled'] = True
        form.fields['obj_desc'].widget.attrs['disabled'] = True
    context = {"Employee_PM":Employee_PM,"employee":employee,"emp_form":emp_form,"emp_summary":emp_summary,"formset":formset}
    return render(request, 'PMS/form_employee.html',context)
    \* {
        padding: 2px;
        margin: 0px;
        margin-bottom: 4px;
        background-color: black;
        color: aliceblue;
        box-sizing:border-box;    
        flex-direction: column;
    }
    .container {
        background-color: black;
    }
    body {
        background-color: black;
    }

    .form2 {
        margin: 20px;
        box-sizing: border-box;
        width:100%;
        resize: none;
        overflow-wrap: break-word;
        /\* display: flex; \*/
        margin: auto;
    }
    input {
        /\* width: 50%; \*/
        display: inline-block;
        width:15rem;
        height: 70px;
        
        position: relative;
    }
    textarea {
        width: 50rem;
        height: 70px;
        resize: none;
    }
    }
    span {
        justify-content: center ;
        display: flex;
    }

<div class="container">
    <h2>formset</h2>
<form method="POST" class="form2" enctype="multipart/form-data">
    {% csrf_token %}
    {{ formset.management_form }}
    {% for form in formset %}
        {% for field in form %}
        {{field}}
        {% endfor %}
    {% endfor %}
    <button type="submit">Submit</button>
</form>

фотография с выхода

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

я думаю, вам следует использовать свойство css под названием 'vertical-align'

Вернуться на верх