How to split a form into two columns?

Question

I have a basic form which passes input to a PHP script. I'd like to split the form up so that the second sub-entry (Person 2) sits in a column to the right of the first (Person 1), rather than directly below.

<link rel="stylesheet" href="test.css">    
    <form class="form-validation" method="post" action="script.php">
       <link rel="stylesheet" href="test.css">
       <h2>Person 1:</h2>
       <br>
       <div class="form-row form-input-name-row">
          <label>
          <span>Name</span>
          <input name="field1" type="text">
          </label>
       </div>
       <div class="form-row form-input-name-row">
          <label>
          <span>Age</span>
          <input name="field2" type="text">
          </label>
       </div>
       <div class="main-content">
          <h2>Person 2:</h2>
          <br>
          <div class="form-row form-input-name-row">
             <label>
             <span>Name</span>
             <input name="field3" type="text">
             </label>
          </div>
          <div class="form-row form-input-name-row">
             <label>
             <span>Age</span>
             <input name="field4" type="text">
             </label>
          </div>
    </form>
    <div>
    <button name="submit">Submit form</button>
    </div>
    </div>

Answer 1

Wrap both entries in a div with the same class (e.g. "sub-entry") and float them left with a width of 50%:

.sub-entry {
    width: 50%;
    float: left;
}

.button {
    text-align: center;
    padding-top: 20px;
    clear: both;
}

<form class="form-validation" method="post" action="script.php">
    <link rel="stylesheet" href="test.css">
    <div class="sub-entry">
        <h2>Person 1:</h2>
        <br>
        <div class="form-row form-input-name-row">
            <label>
                <span>Name</span>
                <input name="field1" type="text">
            </label>
        </div>
        <div class="form-row form-input-name-row">
            <label>
                <span>Age</span>
                <input name="field2" type="text">
            </label>
        </div>
    </div>
    <div class="sub-entry">
        <div class="main-content">
            <h2>Person 2:</h2>
            <br>
            <div class="form-row form-input-name-row">
                <label>
                    <span>Name</span>
                    <input name="field3" type="text">
                </label>
            </div>
            <div class="form-row form-input-name-row">
                <label>
                    <span>Age</span>
                    <input name="field4" type="text">
                </label>
            </div>
        </div>
    </div>
</form>
<div class="button">
    <button name="submit">Submit both forms</button>
</div>

Notice I also gave the div containing the button a class button and styled it to the center of the form.

Answer 2

You can try CSS flexbox.

form { display: flex; }

<form class="form-validation" method="post" action="script.php">

  <div class="person-1">
    <h2>Person 1:</h2>
    <div class="form-row form-input-name-row">
      <label>
        <span>Name</span>
        <input name="field1" type="text">
      </label>
    </div>
    <div class="form-row form-input-name-row">
      <label>
        <span>Age</span>
        <input name="field2" type="text">
      </label>
    </div>
  </div><!-- end .person-1 -->
  
  <div class="main-content person-2">
    <h2>Person 2:</h2>
    <div class="form-row form-input-name-row">
      <label>
        <span>Name</span>
        <input name="field3" type="text">
      </label>
    </div>
    <div class="form-row form-input-name-row">
      <label>
        <span>Age</span>
        <input name="field4" type="text">
      </label>
    </div>
  </div><!-- end .person-2 -->
  
</form>

<div><button name="submit">Submit form</button></div>

Benefits of flexbox:

1. minimal code; very efficient
2. centering, both vertically and horizontally, is simple and easy
3. equal height columns are simple and easy
4. multiple options for aligning flex elements
5. it's responsive
6. unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.

---

Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More browser compatibility details in this answer.