I am working on a form where I have two fields inline within a form-inline div. I am looking to move the labels of these fields above them rather than next to them. How can I achieve this without affecting the layout of the fields?
<main id="contact_part">
<article class="mb-5 row">
<h1>Nous Contacter</h1>
<div class="col-md-12">
<form action="" method="post" id="contact_form">
<div class="form-inline">
<label class="" for="name_contact">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="name_contact" placeholder="Nom" required>
<label class="" for="lastNameContact">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="lastName_contact" placeholder="Prénom" required>
</div>
<div class="form-group">
<label class="" for="email_contact">E-Mail</label>
<input type="email" name="email_contact" id="email_contact" class="form-control" placeholder="E-Mail" required>
</div>
<div class="form-group">
<label class="" for="message_contact">Message</label>
<textarea class="form-control" id="message_contact" placeholder="Message" required></textarea>
</div>
</form>
</div>
</article>
</main>
#contact_part article {
background-color: #FFF989;
font-family: main, "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #565656;
padding: 50px;
}
#contact_part .row {
display: block;
}
#contact_part h1 {
font-size: 1.7rem;
text-transform: uppercase;
margin-bottom: 3rem;
text-decoration: underline;
text-align: center;
}
#contact_form {
width: 50%;
margin: 0 auto;
}
#contact_form .form-inline label {
}
#contact_form input, #contact_form textarea {
border: none;
border-bottom: 1px solid #C6C6C6;
background-color: #FFF989;
}