Javascript функция, чтобы сделать текстовые столбцы имеют одинаковое количество разрывов строк?

Question

Фон

Допустим, у меня есть следующий массив:

const layoutArray = [
  { Icon: Icon1, text: "2 words" },
  { Icon: Icon2, text: "2longer words" },
  { Icon: Icon3, text: "3 sml words" },
  { Icon: Icon4, text: "TwoLongWords TwoLongWords" },
  { Icon: Icon5, text: "Three longer words" },
  { Icon: Icon6, text: "TwoLonger Words" }
];

И этот массив используется для разметки flexbox / grid, например (с использованием Material-UI для этого примера):

function Layout({array}) {
  return (
    <Grid container>
      {array.map(item => {
        const { Icon, text } = item;
        return (
          <Grid item key={text} xs={2}>
            <Icon />
            <Typography>{text}</Typography>
          </Grid>
        );
      }
    </Grid>
  );
};

Что приводит к (добавлен некоторый стиль):

Это хорошо для больших разрешений рабочего стола, но какразмер экрана уменьшается, начинается перенос строк. Например:

Проблема

Я хочу убедиться, что, как только один текстовый элемент переносится вдве строки, затем все текстовые элементы разбиваются на две строки. В настоящее время каждый элемент упаковывается независимо от других элементов. Я не могу жестко закодировать решение, так как layoutArray[n].text будет время от времени меняться.

Пример того, чего я хочу достичь

Использование второго изображениявыше (меньший размер экрана), как только один элемент переносится во вторую строку, все элементы также должны переноситься следующим образом:

Как мне кажется, мне нужно это решить

1. Определить, когда произошел разрыв строки в каком-либо элементе. Один способ, которым я думаю, что это может быть достигнуто, состоит в том, чтобы обернуть каждый текстовый элемент в div с height: fit-content, установив ref для каждого div, а затем проверить, имеют ли какие-либо элементы высоту, отличную от других. Если это так, это означает, что произошел разрыв строки.

2. Если в каком-либо элементе произошел разрыв строки, заставьте все остальные текстовые элементы также разбить на две строки. Это та часть, с которой у меня больше всего проблем. Я не могу просто заменить пробелы в строке на <br />, так как в некоторых строках есть 3 слова. Я также не могу заменить только первый пробел, так как иногда имеет смысл разбить второй пробел (для строк из 3 слов). Я мог бы уменьшить ширину каждого текстового элемента, чтобы вызвать разрыв строки, но я не уверен, как определить, что установить в качестве новой ширины. Слишком маленькое значение может привести к тому, что строки из 3 слов могут разбиться на 3 строки, а слишком большое значение может вообще не вызвать разрыв строки.

Примечание к дублированию

Я заметил, что здесь есть и другие подобные вопросы, но они либо устарели (например, большинство используют jQuery), либо достаточно отличаются от моего вопроса, так что ответы не имеют отношения.