title: Two div element next to each other (For page header)
body: <p>I am trying to make something look like following (don't concern color here. my concern here is the shape);
  <img src="https://i.stack.imgur.com/v4f9w.png" alt="enter image description here">
  I tried something with following code but didn't succeed!</p>
  
  <pre><code>  &lt;html&gt;
      &lt;head&gt;
        &lt;style type="text/css"&gt;
  
          #header{border:3px solid gray;padding:10px;}
          #header-left-container{border:1px solid gray;float:left;width:30%;}
          #header-right-container{border:1px solid gray;float:right;width:69%;}
  
        &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
        &lt;div id="header"&gt;
  
          &lt;div id="header-left-container"&gt;
            pooo
          &lt;/div&gt;
          &lt;div id="header-right-container"&gt;
            bla bla bla.....
          &lt;/div&gt;
  
        &lt;/div&gt;
  
      &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>
  
  <p>I know this can be done with table easily but I don't wanna use table in my application where I can do the same with div elements.</p>
  
  <p>any suggestion here?</p>