When displaying multiple icon boxes in a row, it’s common for them to have different heights because each box contains a different amount of content. This can create an uneven layout, especially when buttons or links are displayed at the bottom of each box, or when the icon boxes have background colors or padding applied to them.
Total includes simple ways to create equal-height icon boxes in both WPBakery and Elementor.
Equal Height Icon Boxes in WPBakery
If you are using WPBakery, simply place your Icon Box elements inside a Grid Container. Grid containers use a default Align Items value of Stretch, which causes all items in the same row to have equal heights.
If you change the Grid Container’s Align Items setting to Start, Center, or End, the icon boxes will no longer stretch to equal heights.
Equal Height Icon Boxes in Elementor
Place your Icon Box widgets inside a Grid Container, then add the wpex-h-100 class to each Icon Box via General → Extra Class Name.
The wpex-h-100 class allows the icon box to stretch and fill the height of its grid cell, resulting in equal-height icon boxes.