Using Positioning on fields in a form

This utilizes positioning to get a side by side view of a form with the addition of a couple media queries it could be made to do mobile even better... (though the resolutions are pretty high on most mobile devices these days...)

by Matt Rummler

HTML

<form id="cartForm" class="container">
            <fieldset id="CartMain">
              <legend>WistCart</legend>
                <input id="Person_ID" type="hidden" name="Person_ID" >
            <div class=left>
                <div id="personFields">
                  <label for="Email">
                      Email Address
                  </label>
                  <input id="Email" name="Email" type="email" placeholder="Email" autofocus>        
                  <label for="FirstName">
                      First Name
                  </label>
                  <input id="FirstName" name="FirstName" type=text placeholder="First Name">
                  <label for="LastName">
                      Last Name
                  </label>
                  <input id="LastName" name="LastName" type="text" placeholder="Last Name" required>
                  <label for="MiddleName">
                      Middle Initial
                  </label>
                  <input id="MiddleName" name="MiddleName" type="text" placeholder="MiddleName">
        </div>
    </div>
    <div class='right'>
        <div id="locationFields" class="tightFields">
                  <label id="Street_AddressLabel" for="Street_Address">
                        Street Address
                  </label>
                  <label class="spacer">
                  </label>
<!--
				  <label class="spacer">
                  </label>
-->
                  <textarea rows="2" id="Street_Address" name="Street_Address"></textarea>
                  <label for="City_ID" data-inline="true">
                    City
                  </label>
                  <select id="City_ID" name="City_Name">
                    <option selected="selected">

                    </option>
                    <option>
                    Boise
                    </option>
                    <option>
                      Caldwell
                    </option>
                    <option>
                     ...

CSS

/* 
    Document   : wist.css
    Created on : April ‎17, ‎2015, ‏‎1:54:09 AM
    Author     : Matthew E. Rummler
    Description:
        Purpose of the stylesheet follows.
!!!!!!!!!!!!!
IMPORTANT!!!
!!! 11-5-2015 05:02
The following fiddle has the CSS & HTML for supporting the WistCart:
April ‎17, ‎2015, ‏‎1:54:09 AM
Therefore this CSS must be modified... additionally it might make sense to split this CSS file into 2 files
1- for the CSS just mentioned (and possibly a few other defaults)
2- for those parts that I may use later but am not currently using
*/
/*
Colors to use for wist:
55255F (even darker)
7B4686 (darker than standard purple)
9454A2 (the standard purple)
BC97C4 (a bit lighter)
D9C3DD (even lighter)
FCF9FD (very light)
FEFCFE (extremely light)
FFFEFF (exceedingly light)
*/
/**
a jsfiddle to utilize the different positioning properties to figure out how to position elements most effectively:
http://jsfiddle.net/wjqacd7v/

jsfiddle to show lining up inputs & their labels cleanly:
http://jsfiddle.net/mrummler/pzpznfvp/
http://jsfiddle.net/mrummler/73b6cpe2/ (more complete of the above)
**/
*
{
    font-family: Arial,Verdana,sans-serif;
    font-size: 1em;
    margin: 0px;
    padding: 0px;
/*    border: none;*/
}

html
{
  height: 100%;
  width: 100%;
}

body
{
  color: #333;
  margin: 0 auto;
  padding: 0px;
  height: 100%;
  width: 100%;
}

input, textArea, select, datalist
{
  box-shadow: 2px 2px 8px #D9C3DD;
  border-radius:5px;
  min-width: 200px;
}

/*label[class=spacer]
{
  padding: 0.45em;
  padding: 1em;
}*/
/* the above helps lineup labels & inputs appropriately*/

input[type=submit]
{
    margin: 0 auto;/*2% 35% 0 38%;*/
    margin-left: 10%;
    font-size:2em;
    -style: bold;
    color: #55255F;
    box-shadow: 3px 3px 6px #9454A2;
}

div[class*=productVideo]
{
  position: relative;
  width:85%;
  height:85%;
  min-width: 100px;
  min-height: 100px;
  margin: 0 auto;
  /*background-color: #f0e0e9;*/
}

form 
{
  margin: 0...