<h1>Better Proximity</h1>

<form class="form" method="post" action="/">
  <div class="grid">
    <div class="grid__item">
      <label for="fullname">Name</label>
    </div>
    <div class="grid__item">
      <input type="text" id="fullname">
    </div>
  </div>
  <div class="grid">
    <div class="grid__item">
      <label for="phone">Phone</label>
    </div>
    <div class="grid__item">
      <input type="text" id="phone" size="9">
    </div>
  </div>
  <div class="grid">
    <div class="grid__item">
      <p>Extra cheese?</p>
    </div>
    <div class="grid__item">
      <div class="grid">
        <div class="grid__item">
          <label>
            <input type="radio" name="cheese">
            Yes
          </label>
        </div>
        <div class="grid__item">
          <label>
            <input type="radio" name="cheese">
            No
          </label>
        </div>
      </div>
    </div>
  </div>
  <div class="grid">
    <div class="grid__item">
      <p>Extra bacon?</p>
    </div>
    <div class="grid__item">
      <div class="grid">
        <div class="grid__item">
          <label>
            <input type="radio" name="bacon">
            Yes
          </label>
        </div>
        <div class="grid__item">
          <label>
            <input type="radio" name="bacon">
            No
          </label>
        </div>
      </div>
    </div>
  </div>
  <div class="grid">
    <div class="grid__item">
      <p>Extra sauce?</p>
    </div>
    <div class="grid__item">
      <div class="grid">
        <div class="grid__item">
          <label>
            <input type="radio" name="sauce">
            Yes
          </label>
        </div>
        <div class="grid__item">
          <label>
            <input type="radio" name="sauce">
            No
          </label>
        </div>
      </div>
    </div>
  </div>
  <div class="grid">
    <div class="grid__item">
      <label for="instructions">Special instructions</label>
    </div>
    <div class="grid__item">
      <textarea id="instructions"></textarea>
    </div>
  </div>
  <button>Submit</button>
</form>
.grid {
  display: flex;
  flex-direction: column;
  margin-bottom: 1em;
}

.grid .grid {
  display: flex;
  flex-direction: row;
  margin-bottom: 0;
}

label {
  margin: 0 .5em .25em 0;
}

External CSS

  1. https://svinkle.github.io/css/codepen.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js
  2. https://svinkle.github.io/js/codepen.js