flexbox form example 5 (Interactive Example)

<!doctype html>
<title>Example</title>
<style>
  .myForm {
    display: flex;
    flex-direction: column;
    background-color: beige;
    border-radius: 3px;
    padding: 1em;
  }
  .row {
    display: flex;
    justify-content: center;
  }
  .column {
    display: flex;
    flex-direction: column;
    padding: 1em;
  }
  .input-group {
   	display: flex;
  }
  .input-group > label {
    margin-right: 1em; 
    padding: .5em 0;
  }
  .myForm input,
  .myForm select {
    flex: 6; 
    padding: .5em;
    margin-bottom: 1em;
  }
  .myForm button {
   padding: 1em; 
    background: gray;
    color: white;
    border: 0;
  }
  .myForm fieldset {
   	border: 0; 
  }
  .taxi > label,
  .extras > label {
    display: block;
  }
</style>
<form class="myForm">

  <div class="row">
    <div class="column">
      <div class="input-group">
        <label for="customer_name">Name </label>
        <input id="customer_name">
      </div>
      <div class="input-group">
        <label for="phone_number">Phone </label>
        <input type="tel" id="phone_number">
      </div>
      <div class="input-group">
        <label for="email_address">Email </label>
        <input type="email" id="email_address">
      </div>
      <div class="input-group">
        <label for="pickup_time">Pickup Date/Time</label>
        <input type="datetime-local" id="pickup_time">
      </div>
      <div class="input-group">
        <label for="pickup_place">Pickup Place</label>
        <select id="pickup_place">
          <option value="" selected="selected">Select One</option>
          <option value="office" >Taxi Office</option>
          <option value="town_hall" >Town Hall</option>
          <option value="telepathy" >We'll Guess!</option>
        </select>
      </div>
      <div class="input-group">
        <label for="dropoff_place">Dropoff Place</label>
        <input type="text" id="dropoff_place" list="destinations">

        <datalist id="destinations">
          <option value="Airport">
          <option value="Beach">
          <option value="Fred Flinstone's House">
        </datalist>
      </div>
    </div>
    <div class="column">
      <fieldset class="taxi">
        <legend>Which taxi do you require?</legend>
        <label> <input type="radio" id="taxi_car" value="car"> Car </label>
        <label> <input type="radio" id="taxi_van" value="van"> Van </label>
        <label> <input type="radio" id="taxi_tuk" value="tuktuk"> Tuk Tuk </label>
      </fieldset>

      <fieldset class="extras">
        <legend>Extras</legend>
        <label> <input type="checkbox" id="extras_baby" value="baby"> Baby Seat </label>
        <label> <input type="checkbox" id="extras_wheel" value="wheelchair"> Wheelchair Access </label>
        <label> <input type="checkbox" id="extras_tip" value="tip"> Stock Tip </label>
      </fieldset>
    </div>
  </div>
  
  <div class="row">
    
    <button id="submit">Submit Booking</button>
    
  </div>
</form>