Set height of two column grid container to the height of the small column
I have a grid container which has 2 columns with different content inside. I want both the columns to be of equal height but that height should be the height of the smaller column and not the bigger column. The bigger column will have scroll bar so we can scroll to view the content of it. A simple demo is as below:
<div class="grid"> <div class="short"> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta, illo eum natus sapiente, ipsa expedita necessitatibus,.</p> </div> <div class="long"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam ratione neque similique aperiam aut ut officiis. Repellendus, optio. Dolorum eaque corporis natus. Praesentium reiciendis, tenetur incidunt deserunt obcaecati accusamus sunt?</p> <p>Velit, recusandae nesciunt? Minus accusantium placeat illum magnam, est neque doloribus possimus iure deserunt ipsa ab. Atque placeat hic ab sequi ratione omnis est laudantium, ea aut quaerat. Quasi, fuga.</p> </div></div>
<div class="grid"> <div class="short"> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta, illo eum natus sapiente, ipsa expedita necessitatibus,.</p> </div> <div class="long"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam ratione neque similique aperiam aut ut officiis. Repellendus, optio. Dolorum eaque corporis natus. Praesentium reiciendis, tenetur incidunt deserunt obcaecati accusamus sunt?</p> <p>Velit, recusandae nesciunt? Minus accusantium placeat illum magnam, est neque doloribus possimus iure deserunt ipsa ab. Atque placeat hic ab sequi ratione omnis est laudantium, ea aut quaerat. Quasi, fuga.</p> </div></div>
I have two columns, as illustrated by this pen. I'm looking for a CSS-only solution (flexbox allowed, obviously) to set the height of the left column to the height of the right column (which is the