title: How to align 3 span in one line horizontaly?
body: <p>How should I keep the <code>yellowarea</code> in middle of <code>redarea</code> and <code>greenarea</code>.</p>
  
  <p><a href="https://jsfiddle.net/ashish3506/4wopk1u3/1/" rel="nofollow">https://jsfiddle.net/ashish3506/4wopk1u3/1/</a></p>
  
  <p>My HTML code</p>
  
  <pre><code>&lt;body&gt;
  &lt;span class="redarea"&gt;&lt;/span&gt; 
  &lt;span class="yellowarea"&gt;&lt;/span&gt; 
  &lt;span class="greenarea"&gt;&lt;/span&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>My CSS Code</p>
  
  <pre><code>.redarea{
  width:300px;
  height:300px;
  background:red;
  float:left;
  }
  
  .yellowarea{
  width:300px;
  height:300px;
  background:yellow;
  margin-left:400px;
  }
  
  .greenarea{
  float:right;
  width:300px;
  height:300px;
  background:green;
  }
  </code></pre>