Exercise #25 - Flexbox

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Exercise #25 - Flexbox</title>
 <link rel="icon" href="favicon.png" type="image/png" sizes="16x16">
 <link rel="stylesheet" href="iphone.css" />
<style>
  .myForm {
    display: flex;
    flex-direction: column;
    background-color: beige;
    border-radius: 3px;
	padding: 1em;
  }
  .row {
    display: flex;
    justify-content: flex-start;
  }
  .column {
    display: flex;
    flex-direction: column;
    padding: .5em;
  }
  .input-group {
   	display: flex;
  }
  .input-group > label {
    margin-right: .5em; 
    padding: .5em 0;
	color:#01615D;
	font-weight:bold;
  }
  .myForm input,
  .myForm select {
    flex: 6; 
    padding: .5em;
    margin-bottom: 1em;
  }
  .myForm button {
   padding: 1em; 
   background: #01615D;
    color: white;
    border: 0;
  }
  .cust > label,
  .extras > label {
    display: block;
  }
legend {
  color:#01615D;
  font-weight:bold;
  font-family:sans-serif;
}
</style>
<form class="myForm">
  <fieldset>
    <legend>Order Form</legend>
  
  <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 Location:</label>
        <select id="pickup_place">
          <option value="" selected="selected" value="bakery-loc">TSF Bakery</option>
          <option value="event-loc" >Event Location</option>
          <option value="other-loc" >Other</option>
        </select>
      </div>
      <div class="input-group">
        <label for="dropoff_place">Dropoff Location:</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="cust" style="margin-bottom:5px;">
        <legend>Customer:</legend>
        <label> <input type="radio" id="cust_indiv" value="individual"> Person</label>
        <label> <input type="radio" id="cust_corp" value="corp"> Corp</label>
        <label> <input type="radio" id="cust-org" value="organization"> Org</label>
      </fieldset>

      <fieldset class="extras">
        <legend>Extras</legend>
        <label> <input type="checkbox" id="extras-topper" value="topper"> Topper</label>
        <label> <input type="checkbox" id="extras-candles" value="candles"> Candles</label>
        <label> <input type="checkbox" id="extras-refrig" value="refrig"> Other</label>
      </fieldset>
    </div>
  </div> 
  <div class="row">
    <button id="submit">Submit Order</button>
 </fieldset>   
  </div>
</form>