Making a container the same size as it's sibling container without relative/absolute positionin-CodePudding

I want the ".on-the-left" container to be the same size as the ".on-the-right" container, without using relative or absolute position.

This is the visual result I want: https://jsfiddle.net/NicoZZZ/osbL16z9/28/

This is what I consider avoiding, if I found a clean alternative:

.on-the-left {
  position: relative;
}

.container-child {
  position: absolute;
}

CodePudding user response：

I'm not sure if this meet all requirements, but the code below produce the same result without the relative or absolute positioning.

.container-parent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: fit-content(1em);

    background: pink;
}

.on-the-left {
    background: lightblue;
    overflow-y: scroll;
}

.on-the-right {
    background: lightgreen;
}

<div class='container-parent'>
    <div class='side-container on-the-left'>
      <div class='container-child'>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <!-- After this point you should scroll to see "more text -->
        <p>More text</p>
        <p>More text</p>
        <p>More text</p>
      </div>
    </div>
    <div class='side-container on-the-right'>
      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
    </div>
  </div>