title: How to align two div panels horizontally
body: <p>I've created two div and aligned them left and right using css inline property, the problem is that I can't set the width and height in percentage (not in pixel value), I've seen some alternatives of this question but I didn't get the solution yet, </p>
  
  <p>This is what i want : <img src="https://i.stack.imgur.com/9K4Zy.png" alt="enter image description here"></p>
  
  <p>Here is a fiddle: <a href="http://jsfiddle.net/6JgNu/" rel="nofollow noreferrer">http://jsfiddle.net/6JgNu/</a> (I've used the pixel values to set height instead of percent). please update it with height in percentage value.</p>
  
  <p>Here is the code :</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  .left-panel
  {        
      background-color:#ccc;
      width:10%;
      height:100px;            
  }
  .right-panel
  {        
      background-color:Gray;
      width:90%;
      height:100px;
  }
  </code></pre>
  
  <p></p>
  
  
      First panel
  
  
  
      Second panel
  
  
  <p>Any help gratefully received!</p>