VueJS, Display form fields in separate rows - css

Question

In my vue component I have a form, there I'm trying to add two fields with labels
<div class="bg-certstyle-background-light " slot="modal_content">
<div class="flex justify-between">
<div class="container mx-auto flex bg-white px-6 py-4 border-b space-x-2">
<!-- Team member -->
<dashboard-input-label class="col-sm-2 mb-2 w-full" identifier="first_name">
{{ 'Team member' }}
</dashboard-input-label>
<div class="col-sm-10 mb-6 w-full">
<input
name="first_name"
type="text"
class="form-input w-full relative z-10"
placeholder="Search user"
>
</div>
<!-- Team member -->
</div>
<div class="container mx-auto flex bg-white px-6 py-4 border-b space-x-2">
<!-- Schedule name -->
<dashboard-input-label class="col-sm-2 mb-2 w-full" identifier="schedule_name">
{{ 'Schedule name' }}
</dashboard-input-label>
<div class="col-sm-10 mb-6 w-full">
<input
name="schedule_name"
type="text"
class="form-input w-full relative z-10"
placeholder="Schedule name"
>
</div>
<!-- Schedule namer -->
</div>
</div>
</div>
This is what I've tried so far, But the problem is, this gives me following output,
Instead of this way, I want to add the second label and field in a new row...
How can I do it?

Answer 1

You could have a outer div-container with a flex-direction: row with two div-container with flex-direction: column inside, which represent your label and field.
Or this bootstrap example could fit: "Two Columns With Two Nested Columns"
Example:
<div class="col">
<div class="row">
<div class="col-sm-6" style="background-color:green;">One</div>
<div class="col-sm-6" style="background-color:red;">Two</div>
</div>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">Three</div>
<div class="col-sm-6" style="background-color:blue;">Four</div>
</div>
<div class="col">
Another alternativ could be a css-grid.
Some nice tips for flex and grid