如何将Divs与不同标题长度对齐

<div class="container">
  <div class="div1">Div 1</div>
  <div class="div2">Div 2 with a longer title</div>
  <div class="div3">Div 3 with a very long title</div>
</div>

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.div1, .div2, .div3 {
  border: 1px solid black;
  padding: 10px;
}

<div class="container">
  <div class="div1">Div 1</div>
  <div class="div2">Div 2 with a longer title</div>
  <div class="div3">Div 3 with a very long title</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.div1, .div2, .div3 {
  border: 1px solid black;
  padding: 10px;
}

<div class="container">
  <div class="div1">Div 1</div>
  <div class="div2">Div 2 with a longer title</div>
  <div class="div3">Div 3 with a very long title</div>
</div>

.container {
  display: flex;
}

.div1, .div2, .div3 {
  border: 1px solid black;
  padding: 10px;
}

const divs = document.querySelectorAll('.container > div');
let maxWidth = 0;

divs.forEach(div => {
  const titleWidth = div.offsetWidth;
  maxWidth = Math.max(maxWidth, titleWidth);
});

divs.forEach(div => {
  div.style.width = `${maxWidth}px`;
});