title: setting two divs side by side and third one below that
body: <p>How do I setup two div's side by side and the third one below that like this </p>
  
  <p><img src="https://i.stack.imgur.com/2Z4FQ.png" alt="output">. </p>
  
  <p>My current code is as below which puts note div after name div</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="info_div"&gt;
      &lt;div id="info_div_name"&gt;Name&lt;/div&gt;
      &lt;div id="info_div_time"&gt;6:30 PM&lt;/div&gt;
      &lt;div id="info_div_note"&gt;Note&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#contact_table_data {
      width:inherit;
      height:inherit;
      background-color:#99cc33;
      max-width:400px;
  }
  
  #info_div_name {
      width:auto;
      height:auto;
      padding: 5px 0px 5px 10px;
      float:left;
  }
  
  #info_div_time {
      width:auto;
      height:auto;
      padding: 5px 10px 5px 0px;
      float:right;
  }
  
  #info_div_note {
      width:inherit;
      height:auto;
      position:static;
      padding: 0px 10px 5px 10px;
  }
  </code></pre>