如何实现筛选场景下对比UI左右项高度同步适配？

我正在开发一款对比UI，要求左右两侧的对应项保持对齐。当筛选导致某一侧的div内容为空时，该div仍需占用与另一侧对应项相同的空间，以保证所有项对齐。

目前已通过JavaScript初步实现高度同步，但当UI随筛选（比如点击移除按钮删除内容项）变化时，盒子高度无法自适应调整。尝试过设置min-height，仅在高度增加时有效，高度减少时不起作用；也试过在设置固定高度前后临时将height设为auto，效果不佳。此外，由于数据传递的复杂性，无法修改HTML结构，只能通过JavaScript实现高度同步。

复现问题的代码片段 #

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div class="grid grid-cols-2 gap-2">
      <div class="flex flex-col gap-2">
        <div class="border first-item">
          <div>
            first <button onclick="this.parentNode.remove()">Remove</button>
          </div>
          <div>
            first <button onclick="this.parentNode.remove()">Remove</button>
          </div>
          <div>
            first <button onclick="this.parentNode.remove()">Remove</button>
          </div>
        </div>
        <div class="border second-item">
          <div>
            first <button onclick="this.parentNode.remove()">Remove</button>
          </div>
          <div>
            first <button onclick="this.parentNode.remove()">Remove</button>
          </div>
        </div>
        <div class="third-item"></div>
        <div class="border fourth-item">
          <div>
            first <button onclick="this.parentNode.remove()">Remove</button>
          </div>
          <div>
            first <button onclick="this.parentNode.remove()">Remove</button>
          </div>
          <div>
            first <button onclick="this.parentNode.remove()">Remove</button>
          </div>
        </div>
      </div>
      <div class="flex flex-col gap-2">
        <div class="border first-item">
          <div>
            second <button onclick="this.parentNode.remove()">Remove</button>
          </div>
          <div>
            second <button onclick="this.parentNode.remove()">Remove</button>
          </div>
          <div>
            second <button onclick="this.parentNode.remove()">Remove</button>
          </div>
        </div>
        <div class="second-item"></div>
        <div class="border third-item">
          <div>
            second <button onclick="this.parentNode.remove()">Remove</button>
          </div>
          <div>
            second <button onclick="this.parentNode.remove()">Remove</button>
          </div>
          <div>
            second <button onclick="this.parentNode.remove()">Remove</button>
          </div>
        </div>
        <div class="border fourth-item">
          <div>
            second <button onclick="this.parentNode.remove()">Remove</button>
          </div>
          <div>
            second <button onclick="this.parentNode.remove()">Remove</button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

.first-item {
  height: var(--first-item-height);
}

.second-item {
  height: var(--second-item-height);
}

.third-item {
  height: var(--third-item-height);
}

.fourth-item {
  height: var(--fourth-item-height);
}

JavaScript

function setEqualHeights() {
  const items = [
    "first-item",
    "second-item",
    "third-item",
    "fourth-item",
  ];
  items.forEach((item) => {
    const elements = document.querySelectorAll(`.${item}`);
    let maxHeight = 0;
    elements.forEach((el) => {
      el.style.height = "auto";
      const height = el.offsetHeight;
      if (height > maxHeight) {
        maxHeight = height;
      }
    });
    elements.forEach((el) => {
      el.style.height = `${maxHeight}px`;
    });
  });
}

window.addEventListener("load", setEqualHeights);
window.addEventListener("resize", setEqualHeights);

内容的提问来源于stack exchange，提问作者Mahabubur Rahman