title: How to style this form using CSS?
body: <p>i'm a beginner at CSS and trying to do a <a href="http://net.tutsplus.com/tutorials/site-builds/convert-a-warm-cheerful-web-design-to-html-and-css/" rel="nofollow noreferrer">NETTUTS</a> , but there's a portion in the webpage that i don't know what exactly to do in CSS to make it look right ... </p>
  
  <p><img src="https://i.stack.imgur.com/17NOz.jpg" alt="enter image description here"></p>
  
  <p>I just can't get this input text boxes, textarea and the button to be aligned like that , and to be honest the tutor isn't doing a great job to clearing stuff out</p>
  
  <p>Using alternative and absolute positioning, and setting top and right spacing is kinda no a good idea i think ... I'm trying to align them using FlexBox feature but don't know why those elements are not moving at all ...</p>
  
  <p>Here's my HTML &amp; CSS3 code (for chrome) :</p>
  
  <pre><code>&lt;section id="getAfreeQuote"&gt;
  &lt;h2&gt;GET A FREE QUOTE&lt;/h2&gt;
  &lt;form method="post" action="#"&gt;
      &lt;input type="text" name="yourName" placeholder="YOUR NAME"/&gt;
      &lt;input type="email" name="yourEmail" placeholder="YOUR EMAIL"/&gt;
      &lt;textarea name="projectDetails" placeholder="YOUR PROJECT DETAILS."&gt;&lt;/textarea&gt;
      &lt;input type="text" name="timeScale" placeholder="YOUR TIMESCALE"/&gt;
      &lt;button&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>#getAfreeQuote form {
   display:-webkit-box;
   -webkit-box-orient:vertical;
      height:500px;
  }
  
   #getAfreeQuote input[name="yourName"]{
  -webkit-box-ordinal-group:1;
   }
  
   #getAfreeQuote input[name="yourEmail"]{
  -webkit-box-ordinal-group:1;
   }
  
   #getAfreeQuote textarea{
  -webkit-box-ordinal-group:2;
   }
  
   #getAfreeQuote input[name="timeScale"]{
  -webkit-box-ordinal-group:3;    
   }
  
   #getAfreeQuote button {
  -webkit-box-ordinal-group:4;    
   }
  </code></pre>
  
  <p>and the result :
  <img src="https://i.stack.imgur.com/BJQ0m.jpg" alt="enter image description here"></p>