how locate elements inside form next to each other

Question

I'm trying to move the name, email and phone fields in the following image next to the message and button:

However, I can't get it fixed.

.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

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