How to style this form using CSS?

Tags: html,css

Problem :

i'm a beginner at CSS and trying to do a NETTUTS , but there's a portion in the webpage that i don't know what exactly to do in CSS to make it look right ...

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

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 ...

Here's my HTML & CSS3 code (for chrome) :

<section id="getAfreeQuote">
<h2>GET A FREE QUOTE</h2>
<form method="post" action="#">
    <input type="text" name="yourName" placeholder="YOUR NAME"/>
    <input type="email" name="yourEmail" placeholder="YOUR EMAIL"/>
    <textarea name="projectDetails" placeholder="YOUR PROJECT DETAILS."></textarea>
    <input type="text" name="timeScale" placeholder="YOUR TIMESCALE"/>
    <button>Submit</button>
</form>

#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;    
 }

and the result :

---

Solution :

Here's how I'd do it:

<section id="getAfreeQuote">
<form method="post" action="#">
<h2>Get a free quote</h2>
    <input type="text" name="yourName" placeholder="YOUR NAME"/>
    <input type="email" name="yourEmail" placeholder="YOUR EMAIL"/>
    <textarea name="projectDetails" placeholder="YOUR PROJECT DETAILS."></textarea>
    <br /><input type="text" name="timeScale" placeholder="YOUR TIMESCALE"/>
    <br /><input type="submit" value="Submit!" />
    <div class="clear"></div>
</form>
</section>


<style>
#getAfreeQuote h2 {
  text-transform: uppercase;
  color: blue;
}

div.clear {
  clear: both;
}

#getAfreeQuote form {
 width: 25em;
 position: relative;
}

 #getAfreeQuote input[name="yourName"]{
 width: 43%;
 }

 #getAfreeQuote input[name="yourEmail"]{
 width: 55%;
 float: right;
 }

 #getAfreeQuote textarea{
 width: 100%;
 height: 10em;
 }

 #getAfreeQuote input[name="timeScale"]{
  width: 100%;
 }

  #getAfreeQuote input[type="submit"]{
    text-transform: uppercase;
    background: orange;
    border: none;
    padding: 1em 2em;
    color: white;
    float: right;
  }

</style>