title: How can I make the left div expand and the right div have constant width?
body: <p>So as the title says, I want to put two divs right next to each other, and have the left one expand if the window is expanded, while the right one stays at a constant width.</p>
  
  <p>Here is what I've got so far:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="content" style="background-color: red"&gt;
          &lt;div id="left" style="margin-right: 100px; background-color: blue"&gt;
              This&lt;/br&gt;is&lt;/br&gt;left.
          &lt;/div&gt;
          &lt;div id="right" style="float: right; width: 100px; height: 100px; background-color: green"&gt;
              This&lt;/br&gt;is&lt;/br&gt;right.
          &lt;/div&gt;
          &lt;div style="clear:both"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/bod&gt;
  </code></pre>
  
  <p>Which produces this:</p>
  
  <p><img src="https://i.imgur.com/m4VnWZ5.png" alt="It is quite sad if you can&#39;t see this :("></p>
  
  <p>Ideally, the green square and blue square should have their tops aligned with each other. One solution I found was putting a negative margin-top setting on the green div, which works... but only as long as the blue div never changes in height. Unfortunately, the blue div can in fact change height in my situation.</p>
  
  <p>Any ideas on how I'd fix this? I'm having some difficulty understanding the intricacies of CSS positioning :(</p>