---
title: "How to Set Equal Column Height in Elementor for FREE (All Widgets)"
url: https://theplusaddons.com/docs/equal-column-height-elementor/
date: 2024-01-02
modified: 2026-09-13
lang: en
author: "Aditya Sharma"
description: "Cards in a row rarely have the same amount of text, so their buttons and boxes end up at different heights. The Equal Height extension from The Plus Addons for..."
image: https://theplusaddons.com/wp-content/uploads/2020/10/How-to-set-Equal-Column-Height-in-Elementor-for-FREE-All-Widgets-1024x536.jpg
word_count: 1046
---

# How to Set Equal Column Height in Elementor for FREE (All Widgets)

## 

- The Plus Addons for Elementor Equal Height extension is part of the free plugin, and it matches items to the height of the tallest one without writing CSS.
- Equal Height adds an Equal Height section to the Advanced tab of every container, section, column and widget, but it only looks for matching items inside that parent element.
- Unique Class mode matches specific widgets by class, such as .elementor-widget-text-editor or .plan-text, and the published page shows the result after Publish or Update.
- Div Level mode uses Widgets or Nested Level 2 to Nested Level 10, but Elementor's Optimized Markup feature removes the elementor-widget-container wrapper in tests with Elementor 4.2.3, so Unique Class is needed when no nested level matches anything.

Cards in a row rarely have the same amount of text, so their buttons and boxes end up at different heights.

The **Equal Height** extension from The Plus Addons for Elementor gives matching items the height of the tallest one, without writing CSS.

***Requirement - This extension is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-extras/equal-height/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Free** — Equal Height is part of the free The Plus Addons for Elementor plugin and works the same with Pro installed.- **Extension to enable:** Equal Height, switched on under **The Plus Addons > Extensions**. It is off until you turn it on.- Elementor (free) installed and activated.- A container, section or widget that holds the items you want to match, such as three cards in a row.

## Video Tutorial

In the current version, the settings section on the Advanced tab is called **Equal Height**.

https://www.youtube.com/watch?v=SQ-_aAQ_cww

## Turn On the Equal Height Extension

- In your WordPress dashboard, go to **The Plus Addons > Extensions**.- Search for **Equal Height** and turn on its toggle. It is off until you switch it on.

![The Plus Addons Extensions screen with Equal Height found by search and its toggle switched on](https://theplusaddons.com/wp-content/uploads/2026/09/eqh-extensions.webp)

## Where the Settings Are

Equal Height adds an **Equal Height** section to the **Advanced** tab of every container, section, column and widget. Set it on the element that *holds* the items you want to match, usually the parent container. It only looks for matching items inside that element.

## Method 1: Unique Class (Recommended)

In this example, three pricing cards sit in one container. Each card has a heading, a text of a different length and a button.

- Select the parent container that holds the cards and open **Advanced > Equal Height**.- Turn on **Equal Height**.

![The Equal Height section on the Advanced tab of a container, with the Equal Height switch turned on](https://theplusaddons.com/wp-content/uploads/2026/09/eqh-switch.webp)

- Set **Mode Based on** to **Unique Class**.

![The Mode Based on dropdown of the Equal Height section set to Unique Class](https://theplusaddons.com/wp-content/uploads/2026/09/eqh-mode.webp)

- In **Enter Unique Class**, type the class of the items to match, **starting with a dot**. For example, `.elementor-widget-text-editor` matches every Text Editor widget inside the container. The screenshot uses `.plan-text`, a class of your own (see Use Your Own Class below).- Click **Publish** or **Update** and open the page. The editor does not show the result, only the published page does.

![The Enter Unique Class field of the Equal Height section with a class name that starts with a dot](https://theplusaddons.com/wp-content/uploads/2026/09/eqh-unique-class.webp)

Before: the texts have different heights, so the buttons do not line up.

![Three pricing cards on the front end without Equal Height, with the buttons at different heights](https://theplusaddons.com/wp-content/uploads/2026/09/eqh-result-base.webp)

After: every text gets the height of the tallest one, and the buttons line up.

![The same three pricing cards with Equal Height on the text, with all buttons in one line](https://theplusaddons.com/wp-content/uploads/2026/09/eqh-result-uc_text.webp)

### Use Your Own Class

If you only want to match some of the widgets, give them a class of your own:

- Select each widget you want to match, open **Advanced > Layout** and type a class in **CSS Classes**, for example `plan-text` (no dot here).- On the parent container, enter the same class in **Enter Unique Class** with a dot in front: `.plan-text`.

![The CSS Classes field on the Advanced tab of a Text Editor widget with the class plan-text](https://theplusaddons.com/wp-content/uploads/2026/09/eqh-css-classes.webp)

### Find the Class of a Widget

To match part of a widget, right-click that part on the published page, choose **Inspect** and copy one of its class names. Add a dot in front when you paste it.

![Using the browser Inspect tool to find and copy the class name of an element](https://theplusaddons.com/wp-content/uploads/2023/01/inspect-css-class.gif)

For example, with three The Plus Addons Pricing Table widgets in a row, `.pricing-content-wrap` matches their feature areas, and `.plus-pricing-table` matches the whole tables.

https://youtu.be/SQ-_aAQ_cww?t=649

## Method 2: Div Level

Set **Mode Based on** to **Div Level**. **Select Nested Level** then decides what is matched:

- **Widgets** (default): every widget inside the element gets the height of the tallest widget. That includes headings and buttons, so the space between them grows.- **Nested Level 2** to **Nested Level 10**, with **Select Sub Nested Level**: count the `div` levels inside a widget, starting from its `elementor-widget-container` wrapper.

![The Equal Height section in Div Level mode with Select Nested Level set to Widgets](https://theplusaddons.com/wp-content/uploads/2026/09/eqh-div-level.webp)

With **Widgets**, the headings, texts and buttons of all three cards become the same height:

![Three pricing cards with Div Level set to Widgets, where every widget has the same tall height](https://theplusaddons.com/wp-content/uploads/2026/09/eqh-result-dl_widgets.webp)

The nested levels only work when your widgets still have the `elementor-widget-container` wrapper. Elementor's Optimized Markup feature removes that wrapper, from The Plus Addons widgets too, and it was active by default in our tests with Elementor 4.2.3. Then no nested level matches anything, so use **Unique Class**. With the wrapper present, Nested Level 2 with Level 1 matched a Pricing Table's inner box, and Nested Level 3 with Level 4 matched its feature area.

![Using the browser Inspect tool to count the div levels inside a widget](https://theplusaddons.com/wp-content/uploads/2023/01/inspect-div-demo.gif)

https://youtu.be/SQ-_aAQ_cww?t=191

## Settings

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| Equal Height | Turns the feature on for this element | Off |
| Mode Based on | **Div Level** or **Unique Class** | Div Level |
| Select Nested Level | Div Level only. **Widgets** or **Nested Level 1** to **Nested Level 10** | Widgets |
| Select Sub Nested Level | Div Level only. **Level 1** to **Level 10** | Level 1 |
| Enter Unique Class | Unique Class only. The class of the items to match, with a dot in front | Empty |

## How It Behaves

- It sets a **minimum height** equal to the tallest match on every matching item inside the element.- All matches inside the element share one height, even when they wrap onto several rows.- It works the same in the free plugin and with Pro installed, and on containers as well as on sections with columns.- On phones, where cards stack, the stacked items also get the same height.- The result only shows on the published page, not in the Elementor editor.

## Limitations

- Heights are not recalculated properly when the browser window is resized. After making the window narrower, items keep their larger desktop height; after making it wider, items can stay unequal. Reloading the page fixes it.- There is no per-device switch. Stacked items on phones also get the tallest height, which can leave empty space.- **Nested Level 1** has no effect in the current version.- **Nested Level 2** to **10** match nothing while Elementor's Optimized Markup feature is active.- A class typed without the leading dot matches nothing.- **Widgets** matches every widget in the element, not just the ones you care about.

## Troubleshooting

### Nothing changes in the editor

That is expected. Publish or update the page and check it on the front end.

### Nothing changes on the published page

- Check that the extension is on under **The Plus Addons > Extensions**.- Check that **Equal Height** is turned on for the element.- Make sure the class starts with a dot and that the matching items are inside the element that has the setting.- If you use a nested level, switch to **Unique Class**.

### Headings and buttons are pushed apart

**Select Nested Level** is set to **Widgets**, which matches every widget. Use **Unique Class** with the class of only the items you want to match.

### Items are unequal after resizing the window

Reload the page. Heights are only worked out correctly when the page loads.

## Related Docs

- [Make any section, column or container clickable](https://theplusaddons.com/docs/make-elementor-container-clickable/)- [Add custom CSS to a column, section or widget](https://theplusaddons.com/docs/custom-css-in-elementor/)- [Add a pricing table in Elementor](https://theplusaddons.com/docs/add-a-pricing-table-in-elementor/)