title: HMLT/CSS: How can I make ONE form to TWO PARTS so that it shows side by side?
body: <p>I'm working on a hotel reservation page for my project and having trouble to make the form right. I have many input fields and my current code just makes it a very long page. My reservation form basically has two parts: customer information and room preference. And I want to align customer information on the left and the room preference on the right. Since I am planning to validate the form, I want it to be in the same <code>&lt;form&gt; &lt;/form&gt;</code>. such as :</p>
  <pre><code>My form currently:
  
  [ [ Customer Info ]
    [ Preferen Info ] ]
  
  How I want it to be:
  
  [ [ Customer Info ] [ Preferen Info ] ]
  </code></pre>
  <p>What I tried was to divide the form into two forms, and then put them next to each other, but I wonder if there is a better way... Below is my current code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#mainContainer {
      width: 1139px;
      display: flex;
      justify-content: center;
      padding: 0;
      margin: auto;
      text-align: center;
  }
  
  #formContainer {
      max-width: 500px;
      width: 100%;
      height: 100%;
      margin-top: 150px;
      background-color: white;
  }
  
  #contact input {
      width: 80%;
      border: 1px solid #ccc;
      background: #FFF;
      margin: 0 0 5px;
      padding: 10px;
  }
  
  #contact button[type="submit"] {
      width: 50%;
      border: none;
      margin: 0 0 55px;
      padding: 10px;
      font-size: 15px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="mainContainer"&gt;
      &lt;div id="formContainer"&gt;
          &lt;form id="contact" action="" method="post"&gt;
            &lt;input placeholder="First name" type="text"&gt;
            &lt;input placeholder="Last name" type="text"&gt;
            &lt;input placeholder="Address 1" type="text"&gt;
            &lt;input placeholder="Address 2" type="text"&gt;
            &lt;input placeholder="City" type="text"&gt;
            &lt;input placeholder="State" type="text"&gt;
            &lt;input placeholder="ZIP" type="text"&gt;
            &lt;input placeholder="Your Phone Number" type="tel"&gt;
            &lt;input placeholder="Your Web Site" type="url"&gt;
            
            &lt;input placeholder="Room Preference" type="text"&gt;
            &lt;input placeholder="Smoking" type="text"&gt;
            &lt;input placeholder="Number of Guest" type="text"&gt;
            &lt;input placeholder="Date" type="text"&gt;
            
            &lt;button name="submit" type="submit" id="contact-submit" data-submit="...Sending"&gt;Submit&lt;/button&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>