CSS equivalent of a jQuery solution to set max height to all elements

August 22, 2022

With the jQuery code below, I could reset the height of 3 elements to the max of them. I would like to replace it with an CSS-based solution.

  // Set max height.
  var maxHeight = 0;
  var prevEntrySelector = null;
  $(".send-submit-look-col .icon-description").each(function(index) {
    if ($(this).height() > maxHeight) { 
      maxHeight = $(this).height(); 
    }
    // Set height of previous entry and this entry to maxHeight.
    $(this).height(maxHeight);
    if (prevEntrySelector != null) {
      prevEntrySelector.height(maxHeight);
    }
    // this - this selector - this story entry
    console.log( "Height: " + maxHeight );
    prevEntrySelector = $(this);
    return true;
  });

The image below shows the section.

Could you please help find the CSS solution? Here is the page

>Solution :

Based on your website this might fix your issue, flex-grow: 1 will make the div fill the maximum space!

.send-submit-look-row .send-submit-look-col {
    display: flex;
    flex-direction: column;
}

.send-submit-look-row .send-submit-look-col .icon-description {
    flex-grow: 1;
}