title: Html form layout
body: <p>What do i want to achieve:</p>
  
  <ol>
  <li>I've created a html form</li>
  <li>I would want some of the field to be side by side to each other.</li>
  <li>I had found some codes online, (<a href="http://livetyping.capcloud.com/blog/forms-the-compleat-guide-part-1-layout-and-alignment.html" rel="nofollow noreferrer">http://livetyping.capcloud.com/blog/forms-the-compleat-guide-part-1-layout-and-alignment.html</a>)  </li>
  <li>I've tried it out on NAME,EMAIL and DEPARTMENT,PURPOSE.</li>
  <li><p>However, the code does not work for me and i could not find the problem to it.</p>
  
  <pre><code> &lt;form&gt;
  &lt;div class="row"&gt;
      &lt;div class="large-8 small-centered columns"&gt;
          &lt;fieldset&gt;
              &lt;legend&gt;KIT EXHANGE REQUISITION FORM&lt;/legend&gt;
              &lt;div class="row"&gt;
                  &lt;div class="small-6 columns"&gt;
                      &lt;label for="NAME"&gt;NAME&lt;/label&gt;
                      &lt;input type="text" name="NAME" id="NAME"/&gt; &lt;br /&gt;
                      &lt;br&gt;
                  &lt;/div&gt;
  
                  &lt;div class="small-6 columns"&gt;
                      &lt;label class="EMAIL"&gt;EMAIL&lt;/label&gt;
                      &lt;input type="email" name="EMAIL" id="EMAIL"/&gt; &lt;br /&gt;
                      &lt;br&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="small-6 columns"&gt;
                      &lt;label class="DEPARTMENT"&gt;DEPARTMENT&lt;/label&gt;
                      &lt;select name="DEPARTMENT" id="DEPARTMENT"&gt;
                          &lt;option&gt;HR&lt;/option&gt;
                          &lt;option&gt;DMS&lt;/option&gt;
                          &lt;option&gt;RIM&lt;/option&gt;
                      &lt;/select&gt;&lt;br /&gt;
                      &lt;br&gt;
                  &lt;/div&gt;
  
                  &lt;div class="small-6 columns"&gt;
                      &lt;label class="PURPOSE"&gt;PURPOSE&lt;/label&gt;
                      &lt;select name="PURPOSE" id="PURPOSE"&gt;
                          &lt;option&gt;NEW KIT&lt;/option&gt;
                          &lt;option&gt;EXCHANGE KIT&lt;/option&gt;
                      &lt;/select&gt;&lt;br /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="small-12 columns"&gt;
                      &lt;br&gt;
                      &lt;label class="SHIRT1"&gt;SHIRT 1&lt;/label&gt;
                      &lt;select name="SHIRT1" id="SHIRT1" onchange="enableQuantity(this.value, 'QTY1')"&gt;
                          &lt;option value=""&gt;&lt;/option&gt;
                          &lt;option vale="XS"&gt;XS&lt;/option&gt;
                          &lt;option value="S"&gt;S&lt;/option&gt;
                          &lt;option value="M"&gt;M&lt;/option&gt;
                          &lt;option value="L"&gt;L&lt;/option&gt;
                          &lt;option value="XL"&gt;XL&lt;/option&gt;
                          &lt;option value="2XL"&gt;2XL&lt;/option&gt;
                          &lt;option value="3XL"&gt;3XL&lt;/option&gt;
                          &lt;option value="4XL"&gt;4XL&lt;/option&gt;
                          &lt;option value="5XL"&gt;5XL&lt;/option&gt;
                          &lt;option value="6XL"&gt;6XL&lt;/option&gt;
                          &lt;option value="7XL"&gt;7XL&lt;/option&gt;
                      &lt;/select&gt;&lt;br /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;br&gt;
                  &lt;div class="small-12 columns"&gt;
                      &lt;label class="QTY1"&gt;QTY&lt;/label&gt;
                      &lt;SELECT name="QTY1" id="QTY1" disabled&gt;
                          &lt;option value=""&gt;&lt;/option&gt;
                          &lt;option value="1"&gt;1&lt;/option&gt;
                          &lt;option value="2"&gt;2&lt;/option&gt;
                          &lt;option value="3"&gt;3&lt;/option&gt;
                      &lt;/SELECT&gt; &lt;br /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;br&gt;
                  &lt;div class="small-12 columns"&gt;
                      &lt;label class="PANT1"&gt;PANTS 1&lt;/label&gt;
                      &lt;select name="PANT1" id="PANT1" onchange="enableQuantity(this.value, 'QTY2')"&gt;
                          &lt;option value=""&gt;&lt;/option&gt;
                          &lt;option value="24"&gt;24&lt;/option&gt;
                          &lt;option value="25"&gt;25&lt;/option&gt;
                          &lt;option value="26"&gt;26&lt;/option&gt;
                          &lt;option value="27"&gt;27&lt;/option&gt;
                          &lt;option value="28"&gt;28&lt;/option&gt;
                          &lt;option value="29"&gt;29&lt;/option&gt;
                          &lt;option value="30"&gt;30&lt;/option&gt;
                          &lt;option value="31"&gt;31&lt;/option&gt;
                          &lt;option value="32"&gt;32&lt;/option&gt;
                          &lt;option value="33"&gt;33&lt;/option&gt;
                          &lt;option value="34"&gt;34&lt;/option&gt;
                          &lt;option value="35"&gt;35&lt;/option&gt;
                          &lt;option value="36"&gt;36&lt;/option&gt;
                          &lt;option value="37"&gt;37&lt;/option&gt;
                          &lt;option value="38"&gt;38&lt;/option&gt;
                          &lt;option value="39"&gt;39&lt;/option&gt;
                          &lt;option value="40"&gt;40&lt;/option&gt;
                          &lt;option value="41"&gt;41&lt;/option&gt;
                          &lt;option value="42"&gt;42&lt;/option&gt;
                          &lt;option value="43"&gt;43&lt;/option&gt;
                          &lt;option value="44"&gt;44&lt;/option&gt;
                          &lt;option value="45"&gt;45&lt;/option&gt;
                          &lt;option value="46"&gt;46&lt;/option&gt;
                          &lt;option value="47"&gt;47&lt;/option&gt;
                          &lt;option value="48"&gt;48&lt;/option&gt;
                      &lt;/select&gt;&lt;br /&gt;
                  &lt;/div&gt;
                  &lt;br&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="small-12 columns"&gt;
                      &lt;label class="QTY2"&gt;QTY&lt;/label&gt;
                      &lt;select name="QTY2" id="QTY2" disabled&gt;
                          &lt;option value=""&gt;&lt;/option&gt;
                          &lt;option value="1"&gt;1&lt;/option&gt;
                          &lt;option value="2"&gt;2&lt;/option&gt;
                      &lt;/select&gt; &lt;br /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;br&gt;
                  &lt;div class="small-12 columns"&gt;
                      &lt;label class="SHIRT2"&gt;SHIRT 2&lt;/label&gt;
                      &lt;select name="SHIRT2" id="SHIRT2" onchange="enableQuantity(this.value, 'QTY3')"&gt;
                          &lt;option value=""&gt;&lt;/option&gt;
                          &lt;option value="XS"&gt;XS&lt;/option&gt;
                          &lt;option value="S"&gt;S&lt;/option&gt;
                          &lt;option value="M"&gt;M&lt;/option&gt;
                          &lt;option value="L"&gt;L&lt;/option&gt;
                          &lt;option value="XL"&gt;XL&lt;/option&gt;
                          &lt;option value="2XL"&gt;2XL&lt;/option&gt;
                          &lt;option value="3XL"&gt;3XL&lt;/option&gt;
                          &lt;option value="4XL"&gt;4XL&lt;/option&gt;
                          &lt;option value="5XL"&gt;5XL&lt;/option&gt;
                      &lt;/select&gt; &lt;br /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;br&gt;
                  &lt;div class="small-12 columns"&gt;
                      &lt;label class="QTY3"&gt;QTY&lt;/label&gt;
                      &lt;SELECT name="QTY3" id="QTY3" disabled&gt;
                          &lt;option value=""&gt;&lt;/option&gt;
                          &lt;option value="1"&gt;1&lt;/option&gt;
                          &lt;option value="2"&gt;2&lt;/option&gt;
                          &lt;option value="3"&gt;3&lt;/option&gt;
                      &lt;/SELECT&gt;&lt;br /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;br&gt;
                  &lt;div class="small-12 columns"&gt;
                      &lt;label class="PANT2"&gt;PANTS 2&lt;/label&gt;
                      &lt;select name="PANT2" id="PANT2" onchange="enableQuantity(this.value, 'QTY4')"&gt;
                          &lt;option value=""&gt;&lt;/option&gt;
                          &lt;option value="28"&gt;28&lt;/option&gt;
                          &lt;option value="29"&gt;29&lt;/option&gt;
                          &lt;option value="30"&gt;30&lt;/option&gt;
                          &lt;option value="31"&gt;31&lt;/option&gt;
                          &lt;option value="32"&gt;32&lt;/option&gt;
                          &lt;option value="33"&gt;33&lt;/option&gt;
                          &lt;option value="34"&gt;34&lt;/option&gt;
                          &lt;option value="35"&gt;35&lt;/option&gt;
                          &lt;option value="36"&gt;36&lt;/option&gt;
                          &lt;option value="37"&gt;37&lt;/option&gt;
                          &lt;option value="38"&gt;38&lt;/option&gt;
                          &lt;option value="39"&gt;39&lt;/option&gt;
                          &lt;option value="40"&gt;40&lt;/option&gt;
                          &lt;option value="41"&gt;41&lt;/option&gt;
                          &lt;option value="42"&gt;42&lt;/option&gt;
                          &lt;option value="43"&gt;43&lt;/option&gt;
                          &lt;option value="44"&gt;44&lt;/option&gt;
                          &lt;option value="45"&gt;45&lt;/option&gt;
                          &lt;option value="46"&gt;46&lt;/option&gt;
                          &lt;option value="47"&gt;47&lt;/option&gt;
                          &lt;option value="48"&gt;48&lt;/option&gt;
                      &lt;/select&gt;&lt;br /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;br&gt;
                  &lt;div class="small-12 columns"&gt;
                      &lt;label class="QTY4"&gt;QTY&lt;/label&gt;
                      &lt;select name="QTY4" id="QTY4" disabled&gt;
                          &lt;option value=""&gt;&lt;/option&gt;
                          &lt;option value="1"&gt;1&lt;/option&gt;
                          &lt;option value="2"&gt;2&lt;/option&gt;
                      &lt;/select&gt;&lt;br /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;br&gt;
                  &lt;div class="small-12 columns"&gt;
                      &lt;label class="SAFETYSHOES"&gt;SAFETY SHOES&lt;/label&gt;
                      &lt;select name="SAFETYSHOES" id="SAFETYSHOES" onchange="enableQuantity(this.value, 'QTY5')"&gt;
                          &lt;option value=""&gt;&lt;/option&gt;
                          &lt;option value="5"&gt;5&lt;/option&gt;
                          &lt;option value="6"&gt;6&lt;/option&gt;
                          &lt;option value="7"&gt;7&lt;/option&gt;
                          &lt;option value="8"&gt;8&lt;/option&gt;
                          &lt;option value="9"&gt;9&lt;/option&gt;
                          &lt;option value="10"&gt;10&lt;/option&gt;
                          &lt;option value="11"&gt;11&lt;/option&gt;
                          &lt;option value="12"&gt;12&lt;/option&gt;
                      &lt;/select&gt;
                      &lt;br /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;br&gt;
                  &lt;div class="small-12 columns"&gt;
                      &lt;label class="QTY5"&gt;QTY&lt;/label&gt;
                      &lt;select name="QTY5" id="QTY5" disabled&gt;
                          &lt;option value=""&gt;&lt;/option&gt;
                          &lt;option value="1"&gt;1&lt;/option&gt;
                      &lt;/select&gt;&lt;br /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;br&gt;
                  &lt;div class="small-12 columns"&gt;
                      &lt;label class="JACKET"&gt;JACKET&lt;/label&gt;
                      &lt;select name="JACKET" id="JACKET" onchange="enableQuantity(this.value, 'QTY6')"&gt;
                          &lt;option value=""&gt;&lt;/option&gt;
                          &lt;option value="S"&gt;S&lt;/option&gt;
                          &lt;option value="M"&gt;M&lt;/option&gt;
                          &lt;option value="L"&gt;L&lt;/option&gt;
                          &lt;option value="XL"&gt;XL&lt;/option&gt;
                      &lt;/select&gt;&lt;br /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;br&gt;
                  &lt;div class="small-12 columns"&gt;
                      &lt;label class="QTY6"&gt;QTY&lt;/label&gt;
                      &lt;select name="QTY6" id="QTY6" disabled&gt;
                          &lt;option value=""&gt;&lt;/option&gt;
                          &lt;option&gt;1&lt;/option&gt;
                      &lt;/select&gt;&lt;br /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;br&gt;
                  &lt;div class="small-12 columns"&gt;
                      &lt;label class="SEFETYVEST"&gt;SAFETY VEST&lt;/label&gt;
                      &lt;select name="SAFETYVEST" id="SAFETYVEST"&gt;
                          &lt;option&gt;&lt;/option&gt;
                          &lt;option&gt;1&lt;/option&gt;
                      &lt;/select&gt;&lt;br /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;br&gt;
                  &lt;div class="small-12 columns"&gt;
                      &lt;label class="POUCH"&gt;POUCH&lt;/label&gt;
                      &lt;select name="POUCH" id="POUCH"&gt;
                          &lt;option&gt;&lt;/option&gt;
                          &lt;option&gt;1&lt;/option&gt;
                      &lt;/select&gt;&lt;br /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;br&gt;
                  &lt;div class="small-12 columns"&gt;
                      &lt;label class="LANYARD"&gt;LANYARD&lt;/label&gt;
                      &lt;select name="LANYARD" id="LANYARD"&gt;
                          &lt;option&gt;&lt;/option&gt;
                          &lt;option&gt;1&lt;/option&gt;
                      &lt;/select&gt;&lt;br /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;br&gt;
                  &lt;div class="small-12 columns"&gt;
                      &lt;label class="RR"&gt;REASONS/REMARKS&lt;/label&gt;
                      &lt;br&gt;
                      &lt;textarea name="RR" id="RR" cols="40" rows="8" placeholder="Fill this if you are exchanging kit"&gt;&lt;/textarea&gt;
                      &lt;br /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;br&gt;
                  &lt;input type="button" id="b1" onClick="insert_value()" value="Insert"&gt;&lt;/input&gt;
          &lt;/fieldset&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p></li>
  </ol>
  
  <p>Below is the full code:</p>
  
  <pre><code>      &lt;!DOCTYPE html&gt;
  
    &lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
   &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
          var script_url = "https://script.google.com/macros/s/AKfycbytxdFwhdpMGS5ClOZfUCfIKoUSi0-pZhkLGnispZs5d9nNZ2-h/exec";
  
      // Make an AJAX call to Google Script
      function insert_value() {
          var NAME = $("#NAME").val();
          var EMAIL = $("#EMAIL").val();
          var DEPARTMENT = $("#DEPARTMENT").val();
          var PURPOSE = $("#PURPOSE").val();
          var SHIRT1 = $("#SHIRT1").val();
          var QTY1 = $("#QTY1").val(); 
          var PANT1 = $("#PANT1").val();
          var QTY2 = $("#QTY2").val();
          var SHIRT2 = $("#SHIRT2").val();
          var QTY3 = $("#QTY3").val();
          var PANT2 = $("#PANT2").val();
          var QTY4 = $("#QTY4").val();
          var SAFETYSHOES = $("#SAFETYSHOES").val();
          var QTY5 = $("#QTY5").val();
          var JACKET = $("#JACKET").val();
          var QTY6 = $("#QTY6").val();
          var SAFETYVEST = $("#SAFETYVEST").val();
          var POUCH = $("#POUCH").val();
          var LANYARD = $("#LANYARD").val();
          var RR = $("#RR").val();
  
          var url = script_url + "?callback=ctrlq&amp;EMAIL=" + EMAIL + "&amp;NAME=" + NAME + "&amp;DEPARTMENT=" + DEPARTMENT + "&amp;PURPOSE=" + PURPOSE + "&amp;SHIRT1=" + SHIRT1 + "&amp;QTY1=" + QTY1 + "&amp;PANT1=" + PANT1 + "&amp;QTY2=" + QTY2 + "&amp;SHIRT2=" + SHIRT2 + "&amp;QTY3=" + QTY3 + "&amp;PANT2=" + PANT2 + "&amp;QTY4=" + QTY4 + "&amp;SAFETYSHOES=" + SAFETYSHOES + "&amp;QTY5=" + QTY5 + "&amp;JACKET=" + JACKET + "&amp;QTY6=" + QTY6 + "&amp;SAFETYVEST=" + SAFETYVEST + "&amp;POUCH=" + POUCH + "&amp;LANYARD=" + LANYARD + "&amp;RR=" +RR + "&amp;action=insert";
  
  
          var request = jQuery.ajax({
              crossDomain: true,
              url: url,
              method: "GET",
              dataType: "jsonp"
          });
  
      }
  
      function enableQuantity(selectValue, qtyEle) {
          document.getElementById(qtyEle).disabled = selectValue ? false : true;
      }
  
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form&gt;
  
  
  &lt;/form&gt;
  </code></pre>
  
  <p>
  </p>