Problem with styling validation elements on the page - vue.js

Question

Could anyone advise how I can style elements so that the p fields were below input fields?
I tried to do so but unfortunatelly I do not know how to do it correctly.
The code:
<template>
<form #submit.prevent class="row justify-content-center">
<input
ref="input"
type="text"
class="input-box"
style="display: block"
v-model="$store.state.medicineNameInput"
v-on:keydown.enter.prevent="addMedicine"
placeholder="Input a medicine"
/>
<p
class="validation"
v-if="getMedicineNameInput === '' || getMedicineNameInput.trim() === ''"
>
This field cannot be empty.
</p>
<p class="validation" v-else-if="getMedicineNameInput.length < 3">
You need to input at least three characters.
</p>
<input
ref="input"
type="date"
class="input-box"
v-model="$store.state.medicineExpiryDateInput"
v-on:keydown.enter.prevent="addMedicine"
placeholder="Input expiry date"
/>
<p class="validation" v-if="getMedicineExpiryDateInput === ''">
Please input a valid date.
</p>
<button
type="submit"
v-if="
getMedicineNameInput.length >= 3 &&
getMedicineExpiryDateInput.length === 10
"
#click="addMedicine"
class="btn btn-warning"
>
Add a medicine
</button>
</form>
</template>
The elements on the page:
I would be gratefull for advice.

Answer 1

Try to wrap every input and paragraph inside a section tag
and give it styles ->
display : “flex”
flex-direction:”column”
It should display the elements below each other