:root { --primary-color1: #262424; --primary-color2: #fff; --secondary-color: #f3f3f3; --link-color: rgb(101, 101, 195); --link-hover-color: rgb(2, 2, 222);}p { text-align: center; margin-top: 10px;}.left-right-container { display: -webkit-box; display: -ms-flexbox; display: flex; width: 70%; padding: 10px;}.left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; /* -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; */ width: 50%; padding: 10px 10px 10px 0;}.left>div:first-child { margin-bottom: 10px;}.right { display: -webkit-box; display: -ms-flexbox; display: flex; width: 50%; padding: 10px 0 10px 10px; /* -webkit-box-sizing: border-box; box-sizing: border-box; */}.left>div,.right>div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; background-color: var(--secondary-color); padding: 10px; margin: 10px auto 10px 0px; width: 100%; max-width: 750px; text-align: center; border: 1px solid var(--primary-color1); border-radius: 10px; -webkit-box-sizing: border-box; box-sizing: border-box;}.left-right-container li,.left-right-container dt,.left-right-container dd { text-align: left;}.left-right-container dt { font-weight: bold;}@media screen and (max-width: 850px) { .left-right-container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .left, .right { width: 100%; padding: 0; }}<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?