问如何使用CSS Grid/JavaScript根据其他div宽度设置div宽度？

EN

import React from "react";

const App = () => {
  const ref1 = React.useRef(null);
  const ref2 = React.useRef(null);
  const [width1, setWidth1] = React.useState(0);
  const [width2, setWidth2] = React.useState(0);

  React.useEffect(() => {
    setWidth1(ref1.current.offsetWidth);

    const getwidth = () => {
      setWidth1(ref1.current.offsetWidth);
    };

    window.addEventListener("resize", getwidth);

    return () => window.removeEventListener("resize", getwidth);
  }, []);

  React.useEffect(() => {
    setWidth2(ref2.current.offsetWidth);

    const getwidth = () => {
      setWidth2(ref2.current.offsetWidth);
    };

    window.addEventListener("resize", getwidth);

    return () => window.removeEventListener("resize", getwidth);
  }, []);

  return (
    <div
      style={{
        width: "100vw",
        height: "100vh",
        maxWidth: "100%"
      }}
    >
      <div
        style={{
          height: "100vh"
        }}
      >
        <div
          style={{
            display: "flex",
            flexDirection: "row"
          }}
        >
          <div
            ref={ref1}
            style={{
              border: "1px solid blue",
              backgroundColor: "lightblue",
              display: "grid",
              gridTemplateColumns: "minmax(570px, 720px)",
              fontSize: "30px"
            }}
          >
            Left - {width1}
          </div>
          <div
            ref={ref2}
            style={{
              border: "1px solid red",
              backgroundColor: "lightcoral",
              display: "grid",
              gridTemplateColumns: "minmax(380px, 100vw)",
              fontSize: "30px"
            }}
          >
            Right - {width2}
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;