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

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.

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.

Turn On the Equal Height Extension

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

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.

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

3. Set Mode Based on to Unique Class.

4. 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).
5. Click Publish or Update and open the page. The editor does not show the result, only the published page does.

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

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

Use Your Own Class

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

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

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.

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.

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.

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

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.

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
• Add custom CSS to a column, section or widget
• Add a pricing table in Elementor