django forms - CSS alignment - html

Question

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 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>
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

Answer 1

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