how locate elements inside form next to each other

Question

I'm trying to make the name, email and phone be next to message and button, but can't get it done.

Screenshot

 .full_form { display: block; }.form_contact { margin: 10.4%; float: right; border: 1px solid black; box-shadow: 0px 0px 20px 3px black; max-width: 100%; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; text-align: left; padding-top: 2%; padding-left: 12%; padding-bottom: 10px; padding-right: 12%; border-radius: 0.25rem; }.form_element_group { margin-bottom: 1rem; }.form_input_group_right { position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: stretch; align-items: stretch; width: 100%; float: right; }.form_input_group_left { position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: stretch; align-items: stretch; width: 100%; float: right; }.form_controls { display: inline-block; width: 50%; height: calc(1.5em + 0.75rem + 2px); padding: 0.275rem 1.95rem; font-size: 0.8rem; font-weight: 400; line-height: 1.5; color: #b0729e; background-color: rgb(67, 41, 41); background-clip: padding-box; border: 1px solid #59383b; outline: none; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }.form_contact #message { padding: 2.275rem 2.95rem; }.form_input_group #message, #form_button { float: right; }.label_group { color: white; } h4 { font-size: 40px; color: white; }

 <main> <article> <div class="full_form"> <div class="form_contact"> <h4>Student project</h4> <form id="form_itself_id" class="form_itself_class"> <div class="form_element_group_right"> <label for="name" class="label_group">Name*</label> <div class="form_input_group"> <input type="text" id="name" name="name" class="form_controls" placeholder="Enter your name" required> </div> </div> <div class="form_element_group_right"> <label for="name" class="label_group">Email*</label> <div class="form_input_group"> <input type="email" id="email" name="email" class="form_controls" placeholder="Enter your Email" required> </div> </div> <div class="form_element_group_right"> <label for="name" class="label_group">Phone*</label> <div class="form_input_group"> <input type="number" id="phonenumber" name="phonenumber" class="form_controls" placeholder="Phone Number" required> </div> </div> <div class="form_element_group_left"> <label for="message" class="label_group">Message*</label> <div class="form_input_group"> <textarea id="message" name="message" class="form_controls" rows="6" maxlength="400" placeholder="Write your message" required></textarea> </div> </div> <div class="form_element_group_left"> <button type="submit" id="form_button" class="">Sumbit Request</button> </div> </form> </div> </div> </article> <article> <section> </section> </article> </main>

Answer 1

This is what I added:

  .form_itself_class {
    width: 20vw;
  }

  .form_element_group_right, 
  .form_element_group_left {
    display: flex;
  }

You have to play around with the styling yourself, but I hope this helps:

 .full_form { display: block; }.form_contact { margin: 10.4%; float: right; border: 1px solid black; box-shadow: 0px 0px 20px 3px black; max-width: 100%; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; text-align: left; padding-top: 2%; padding-left: 12%; padding-bottom: 10px; padding-right: 12%; border-radius: 0.25rem; }.form_element_group { margin-bottom: 1rem; }.form_controls { display: inline-block; width: 100%; height: calc(1.5em + 0.75rem + 2px); padding: 0.275rem 1.95rem; font-size: 0.8rem; font-weight: 400; line-height: 1.5; color: #b0729e; background-color: rgb(67, 41, 41); background-clip: padding-box; border: 1px solid #59383b; outline: none; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }.form_contact #message { padding: 2.275rem 2.95rem; }.form_input_group #message, #form_button { float: right; }.label_group { color: red; } h4 { font-size: 40px; color: red; }.form_itself_class { width: 20vw; }.form_element_group_right, .form_element_group_left { display: flex; }

 <main> <article> <div class="full_form"> <div class="form_contact"> <h4>Student project</h4> <form id="form_itself_id" class="form_itself_class"> <div class="form_element_group_right"> <label for="name" class="label_group">Name*</label> <div class="form_input_group"> <input type="text" id="name" name="name" class="form_controls" placeholder="Enter your name" required> </div> </div> <div class="form_element_group_right"> <label for="name" class="label_group">Email*</label> <div class="form_input_group"> <input type="email" id="email" name="email" class="form_controls" placeholder="Enter your Email" required> </div> </div> <div class="form_element_group_right"> <label for="name" class="label_group">Phone*</label> <div class="form_input_group"> <input type="number" id="phonenumber" name="phonenumber" class="form_controls" placeholder="Phone Number" required> </div> </div> <div class="form_element_group_left"> <label for="message" class="label_group">Message*</label> <div class="form_input_group"> <textarea id="message" name="message" class="form_controls" rows="6" maxlength="400" placeholder="Write your message" required></textarea> </div> </div> <div class="form_element_group_left"> <button type="submit" id="form_button" class="">Submit Request</button> </div> </form> </div> </div> </article> <article> <section> </section> </article> </main>

Answer 2

I notice that you are using class names that do not match in CSS selector,

By the way if you want to position those elements next to each other, you could remove this syntax

.form_input_group #message,
#form_button {
  float: right; 
}