Here’s jsfiddle link https://jsfiddle.net/n7ajthL2/4/

HTML

<div class="left-right-container">
                <div class="left">
                    <div>
                        <h4>lorem</h4>
                        <p>Lorem ipsum doler sit amet</p>
                    </div>
                    <div>
                        <h4>Lorem ipsum</h4>
                        <p>Lorem ipsum doler sit amet</p>
                        <ol>
                            <li>Lorem ipsum dolor sit amet, conseteturS</li>
                            <li>Lorem ipsum dolor sit amet, consetetur</li>
                            <li>Lorem ipsum dolor sit amet, consetetur</li>
                            <li>Lorem ipsum dolor sit amet, consetetur</li>
                        </ol>
                    </div>
                </div>
                <div class="right">
                    <div>
                        <h4>Lorem ipsum dolor</h4>
                        <p>Lorem ipsum dolor sit amet, consetetur</p>
                        <dl>
                            <dt>Lorem ipsum</dt>
                            <dd>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</dd>
                            <dt>Lorem ipsum</dt>
                            <dd>
                                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                                <br><br>
                                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</dd>
                        </dl>
                    </div>
                    
                </div>
            </div>

Say, I want the 2 elements on the left to be the same height. I added flex-grow: 1 but the higher and lower elements aren’t the same height. Why? And how to make them the same height?