title: Set the max height of one child div as the height of another child of the same parent div
body: <p>The div structure is -</p>
  <pre><code>&lt;div class=&quot;parent&quot;&gt;
      &lt;div class=&quot;left float-start&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;right float-end overflow-y&quot;&gt;&lt;/div&gt;
  &lt;div&gt;
  </code></pre>
  <p>Now,</p>
  <ol>
  <li><p>For the left child -</p>
  <ul>
  <li>the height should be based on dynamic content</li>
  <li>displayed entirely with no overflow scroll</li>
  </ul>
  </li>
  <li><p>For the right child -</p>
  <ul>
  <li>height is also based on dynamic content but</li>
  <li>max height should be the height of the left child</li>
  <li>set to overflow-y scroll and so it's never longer than the left child but can be shorter</li>
  </ul>
  </li>
  </ol>
  <p>How do i do this only using css?</p>
  <p>Any help would be appreciated!!</p>