I am pretty new to CSS, however I have a django modelformset_factory which i need to render and align all rendered fields in same line for each field, it has TextArea and Textinput, the problem as per the attached picture i tried to aligned all but they never get aligned together.

here my view:

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 >
    <h2>formset</h2>
<form method="POST"  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>

a photo from the output

the main problem is mainly I need to give them all the same height and align them to same line

CodePudding user response：

i think you should use css property called 'vertical-align'