title: How automatically adjust div's width using CSS?
body: <p>Consider the <a href="http://jsfiddle.net/eRDRA/17/" rel="nofollow">following example</a>:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="left"&gt;Some text here&lt;/div&gt;&lt;div class="right"&gt;Hello Stack Overflow&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.wrapper {
      border: 1px solid black;
      width: 400px;
  }
  .left {
      border: 1px solid green;
      display: inline-block;
  }
  .right {
      border: 1px solid red;
      display: inline-block;
      float: right;
  }
  </code></pre>
  
  <p>I would like to force the width of the green <code>div</code> to be as big as possible, according to the width of the red one. The width of the red <code>div</code> can vary according to <code>div</code>'s content. So, for example, if the width of the red <code>div</code> is 150px, the width of the green one should be 250px. This should always be true: </p>
  
  <pre><code>green div width + red div width = 400px
  </code></pre>
  
  <p>How could I achieve this using CSS ?</p>
  
  <p>No Javascript please...</p>