title: Display two divs in a single line filling space - CSS
body: <p>I have two divs <code>diva</code> and <code>divb</code>. They have a fixed height of <code>30px</code>. I want to display them in a single line, one after the other. This can be done by giving them widths of <code>10%</code> and <code>90%</code> respectively and by <code>float: left</code>. This works fine. But I gave them a border of <code>1 px</code> and this disturbs the calculation. I gave the second div a width of <code>88%</code> and is working. But there is an empty space after that div. </p>
  
  <p>I want both the divs to display in a single line. The page re sizes and I want divs to fill space and so that I can't give them fixed width. The first div may be given a fixed width, because I just want it <code>150 px</code> wide. But the second div must be wider to fill space.</p>
  
  <p>What I am getting is this;</p>
  
  <p><img src="https://i.stack.imgur.com/lM2CV.png" alt="Current layout"> </p>
  
  <p>and I want this:</p>
  
  <p><img src="https://i.stack.imgur.com/7Xrbu.png" alt="Expected layout"></p>
  
  <p><strong><a href="http://jsfiddle.net/blasteralfred/76Raj/" rel="nofollow noreferrer">Here</a></strong> is the fiddle.</p>