Make list items assume height of largest list item

Question

I have a group of list items that are essentially containers with some text content. On mobile screen dimensions, I want the height of the containers to be set automatically according to the text content. However, I want all of the containers to assume the same height. So in this case, each container height would equal the height of the tallest container. The codesandbox link is here.

As you can see in the screenshot below, on a 414 px screen, the third container in the list is taller than the other two. I want all the containers to assume the height of the third one so that they can be the same.

How can I accomplish this? Here is the relevant lines of code:

<div className="App">
  <h1>Lender Benefits</h1>
  <ul className="list">
    {lenderBenefits.map((benefit) => (
      <li className="benefit_container">{benefit}</li>
    ))}
  </ul>
</div>

.list {
  padding-left: 0;
  width: 100%;
}

.benefit_container {
  /* height: max-content; */
  border-radius: 24px;
  margin-bottom: 12px;
  padding: 2px 8px;
  font-size: 16px;
  font-weight: 600;
  background-color: #f1e8dc;
  display: flex;
  align-items: center;
}

Answer 1

The CSS Grid approach (preferred):

const styleForEqualHeightRows = { 
  display: "grid", 
  gridAutoRows: "1fr", 
  gap: "1rem" // <= Optional
}

export default function App() {
  return (
    <div className="App">
      <h1>Lender Benefits</h1>
      <ul
        className="list"
        style={styleForEqualHeightRows}
      >
        {lenderBenefits.map((benefit) => (
          <li
            key={benefit}
            className="benefit_container"
          >
            {benefit}
          </li>
        ))}
      </ul>
    </div>
  );
}

Here's one (hacky) approach using JavaScript:

import { useLayoutEffect, useRef, useState } from "react";
import "./styles.css";
const lenderBenefits = [
  "No repayment, just reduced margins through credit",
  "A cash advance without predatory interest",
  "Works with your community to bring them in on your mission"
];

export default function App() {
  const list = useRef();
  const [style, setStyle] = useState({});
  useLayoutEffect(() => {
    async function handleResize() {
      await setStyle({}); // Break from batch updates...
      const lis = list.current.querySelectorAll("li");
      const heights = [...lis].map((li) => li.offsetHeight);
      const maxHeight = Math.max(...heights);
      setStyle({ height: maxHeight + "px" });
    }
    handleResize();
    window.addEventListener("resize", handleResize);
    return function cleanUp() {
      window.removeEventListener("resize", handleResize);
    };
  }, []);
  return (
    <div className="App">
      <h1>Lender Benefits</h1>
      <ul ref={list} className="list">
        {lenderBenefits.map((benefit) => (
          <li key={benefit} style={style} className="benefit_container">
            {benefit}
          </li>
        ))}
      </ul>
    </div>
  );
}