# How to make height of left div same as right div when 2 divs have differnet height

**URL:** <https://community.weweb.io/t/how-to-make-height-of-left-div-same-as-right-div-when-2-divs-have-differnet-height/19586>\
**Category:** Ask us anything\
**Created:** [August 7, 2025, 8:05am UTC](https://community.weweb.io/t/how-to-make-height-of-left-div-same-as-right-div-when-2-divs-have-differnet-height/19586 "2025-08-07T08:05:42Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dingan](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dingan/32/10624_2.png) [@dingan](https://community.weweb.io/u/dingan)\
**Post date:** [August 7, 2025, 8:05am UTC](https://community.weweb.io/t/how-to-make-height-of-left-div-same-as-right-div-when-2-divs-have-differnet-height/19586/1 "2025-08-07T08:05:42Z")

</div>

I have a main div which is set to Flex , direction horizondal  
inside it 2 divs  
left div and right div

heights are set to auto for all (parents and children)

the height of container is normally the height of div on right because thats what contains most text and other elements.

i want to match the height of left div to the right div. how can we do that ?

I tried using height = 100% but the left div stil stays same height.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/0/00b24b777a5780cfdd30653159466bb4962901b6.png)

an ideal outcome i am looking for will look like this

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/c/c05c14b94355e128c24f696bbe64364233c40bf2.png)

(this is when i set height of left div manually)

---

<div class="post-metadata">

**Author:** ![dingan](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dingan/32/10624_2.png) [@dingan](https://community.weweb.io/u/dingan)\
**Post date:** [August 7, 2025, 8:45am UTC](https://community.weweb.io/t/how-to-make-height-of-left-div-same-as-right-div-when-2-divs-have-differnet-height/19586/2 "2025-08-07T08:45:14Z")

</div>

Found the solution myself.

Apply this css to parent class

`align-items: stretch`

---

<div class="post-metadata">

**Author:** ![Agustin\_Carozo](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/agustin_carozo/32/13231_2.png) [@Agustin\_Carozo](https://community.weweb.io/u/Agustin_Carozo)\
**Post date:** [August 7, 2025, 12:44pm UTC](https://community.weweb.io/t/how-to-make-height-of-left-div-same-as-right-div-when-2-divs-have-differnet-height/19586/3 "2025-08-07T12:44:30Z")

</div>

Hi Aby, thank you for sharing the solution you found 🙂

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/b/bee40a614c5b74fbef4e7bb6f73d022e2b8203e3.png) [@system](https://community.weweb.io/u/system)\
**Post date:** [October 21, 2025, 8:06am UTC](https://community.weweb.io/t/how-to-make-height-of-left-div-same-as-right-div-when-2-divs-have-differnet-height/19586/4 "2025-10-21T08:06:36Z")

</div>

Closed on October 21, 2025, 8:06am UTC

This topic was automatically closed after 75 days. New replies are no longer allowed.