title: Set inline-blocks with the same height, without specifying height, using absolute positioning, nor JavaScript
body: <p>I need to have 2 inline-blocks next to each other, and I need the height of the second div to be the same height of the first div, but there's a few things that I can't have.</p>
  
  <ol>
  <li>Heights cannot be specified for either divs.</li>
  <li>The second div cannot be absolute positioned.</li>
  <li>JavaScript cannot be used to set the position of the second div.</li>
  </ol>
  
  <p>Right now, I'm using absolute positioning for the second div to make it the same height as the first div. Is there a way to do it without using that, number 1 or number 3?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#wrapper {
  border: 1px solid red;
  width: 50%;
  position: relative;
  }
  #content1 {
  border: 1px solid blue;
  display: inline-block;
  width: 40%;
  }
  #content2 {
  border: 1px solid blue;
  display: inline-block;
  width: 40%;
  position: absolute;
  top: 0;
  bottom: 0;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id = 'wrapper'&gt;
  &lt;div id = 'content1'&gt; content1&lt;br&gt;content1 &lt;/div&gt;
  &lt;div id = 'content2'&gt; content2 &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>