How do I make questions i one row but in differnt columns

Question

How do i make questions (input) in the same row but in differnt columns, or if their is a better (in your opinion) way to put these to make them look nice.

Example:

Question Question Question

Question Question Question

Ect.

 <div class="input-group-1">
                    <div>
                        <h1 style="font-size: 35px; color: #2e53cc">Email:</h1>
                        <input type="email" id="email" name="email" placeholder="example@example.com" required>

                    </div>

                        

                    <div>
                        <h1 style="font-size: 35px; color: #00b65b">First Name:</h1>
                        <input type="text" id="first-name" name="first-name" placeholder="John" required>
                    </div>

                        

                    <div>
                        <h1 style="font-size: 35px; color: #2e53cc">Last Name:</h1>
                        <input type="text" id="Last-name" name="Last-name" placeholder="Doe" required>
                    </div>
                </div>

<!-- How do i put this is a row but in a differnt row than this without over laping them -->

                          <div class="input-group-2">

<div>
                        <h1 style="font-size: 35px; color: #00b65b">Your Dinner:</h1><br>
                        <input type="text" id="Student-Dinner" name="Student-Dinner" placeholder="Chicken or Pork" required><br>
                    </div>

                        <br><br>

                    <div>
                        <h1 style="font-size: 35px; color: #2e53cc">Have You Paid:</h1><br>
                        <input type="text" id="Paid?" name="Paid?" placeholder="Yes/No" required><br>
                    </div>

                        <br><br>

                    <div>
                        <h1 style="font-size: 35px; color: #00b65b">Guest Name:</h1><br>
                        <input type="text" id="Guest-Name" name="Guest-Name" placeholder="Guest's Name" required><br>
                    </div>

        </div>

Answer 1

To get the basic structure, simply apply float: left to each of the child <div> elements, and clear: both to the parent .input-group elements.

You'll also want to remove the <br> tags in your example (I suggest never using these), and optionally space things out a bit. This can be done with display: flex on the parent .input-group elements, and flex: 1 on the children, as seen in the following example:

.input-group-1, .input-group-2 {
  clear: both;
  display: flex;
}

.input-group-1 > div, .input-group-2 > div {
  float: left;
  flex: 1;
}

<div class="input-group-1">
  <div>
    <h1 style="font-size: 35px; color: #2e53cc">Email:</h1>
    <input type="email" id="email" name="email" placeholder="example@example.com" required>
  </div>
  <div>
    <h1 style="font-size: 35px; color: #00b65b">First Name:</h1>
    <input type="text" id="first-name" name="first-name" placeholder="John" required>
  </div>
  <div>
    <h1 style="font-size: 35px; color: #2e53cc">Last Name:</h1>
    <input type="text" id="Last-name" name="Last-name" placeholder="Doe" required>
  </div>
</div>

<div class="input-group-2">
  <div>
    <h1 style="font-size: 35px; color: #00b65b">Your Dinner:</h1>
    <input type="text" id="Student-Dinner" name="Student-Dinner" placeholder="Chicken or Pork" required>
  </div>
  <div>
    <h1 style="font-size: 35px; color: #2e53cc">Have You Paid:</h1>
    <input type="text" id="Paid?" name="Paid?" placeholder="Yes/No" required>
  </div>
  <div>
    <h1 style="font-size: 35px; color: #00b65b">Guest Name:</h1>
    <input type="text" id="Guest-Name" name="Guest-Name" placeholder="Guest's Name" required>
  </div>
</div>