title: The height of two divs equal based of height of main div
body: <p>I have two divs on my page; side panel and main panel. </p>
  
  <p>In the side panel I will always have a bunch of blocks on content, the number with change all the time. And the main panel will have some block of content. Generally the side panel will have bigger height than main panel.</p>
  
  <p>I am looking for the main panel height to equal the content in that panel and I am looking for a way to have the height of the side panel equal to the size of the main panel. While the the overflow of the side panel scroll. Im not looking to set a static height for either, because the amount of content changes.</p>
  
  <p>Currently I'm using grid but all for changing that if there is a way to do this.</p>
  
  <p>Here is a Codepen mockup of what I currently have:
  <a href="https://codepen.io/aculbreth/full/VMjRyx" rel="nofollow noreferrer">https://codepen.io/aculbreth/full/VMjRyx</a></p>
  
  <pre><code>.box {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-gap: 20px;
    grid-auto-columns: max-content;
    background: #efefea;
    margin: 50px auto;
    padding: 20px;
    box-sizing: border-box;
    .side_panel {
      background:#fff;
      padding:20px;
      box-sizing: border-box;
      .side_panel_box {
        text-align:center;
        border: 1px solid #000;
        margin-bottom:20px;
      }
    }
    .main_panel {
      background:#fff;
      padding:20px;
      box-sizing: border-box;
      display:block;
      grid-auto-columns: max-content;
  
    }
  }
  </code></pre>
  
  <p>Here is a rough mockup of what i'm looking for:
  <a href="https://i.stack.imgur.com/N0fQ6.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N0fQ6.jpg" alt="enter image description here"></a></p>