0

I need to align the list items in two separate containers, Both the list items can have variable height , I need to align the first list item of one container from the first list item of second container. This is achievable if I take the height of bigger list item out of corresponding list item.I cannot set maxheight specifically since the contents are dynamic and I cannot apply tables or grids since both list items are inside two seperate divs.

<div class="d-flex justify-content-center mt-5">
<div class="col-10 pre-ee_card_container">
    <div class="pre-ee_card mb-5 mb-sm-0">
        <h3>Standard Plan</h3>
        <ul class="right-arrow-bullet">
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo doloribus voluptate ex accusantium nulla, explicabo molestias asperiores ipsam. Culpa hic ipsam doloremque impedit totam aliquid vitae maxime iste consequatur libero!</li>
            <li>lorum ipsum dolor sit amet consectetur adipis</li>
            <li>lorum ipsum dolor sit amet</li>
        </ul>
    </div>
    <div class="pre-ee_card">
        <h3>Premium Plane</h3>
        <ul class="right-arrow-bullet">
            <li>lorum ipsum dolor sit amet</li>
            <li>lorum</li>
            <li>Lorem ipsum dolor sit amet</li>
        </ul>
    </div>
</div>

enter image description here

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
Moin Ahmed
  • 49
  • 2
  • 8

0 Answers0