Make a collapsible menu using css only

Question

Problem

I have content with some unknown height. For the purposes of example, call this height

DUMMY_CONTENT_HEIGHT

I want users to press a button, and have the content collapse to a known smaller height,

MINIMIZED_CONTENT_HEIGHT

I implemented this (I need to use a grid for my project),

import { useState } from "react";
export default function App(props) {
  const [minimized, setMinimized] = useState(false);

  const DUMMY_CONTENT_HEIGHT = 100;
  const MINIMIZED_CONTENT_HEIGHT = 20;
  const NORMAL_CONTENT_HEIGHT = "100%";

  return (
    <div style={{ display: "grid" }}>
      <button
        onClick={(e) => {
          setMinimized(!minimized);
        }}
        style={{ gridRow: "1", gridColumn: "1" }}
      >
        CLICK ME
      </button>
      <div
        style={{
          gridRow: "2",
          gridColumn: "1",
          overflow: "hidden",
          transition: "all 1s ease",
          maxHeight: minimized
            ? MINIMIZED_CONTENT_HEIGHT
            : NORMAL_CONTENT_HEIGHT
        }}
      >
        <div
          style={{ height: DUMMY_CONTENT_HEIGHT, backgroundColor: "rgb(255 0 0)" }}
        ></div>
      </div>
      <div
        style={{
          gridRow: "3",
          gridColumn: "1",
          height: 50,
          backgroundColor: "rgb(50 0 0)",
        }}
      ></div>
    </div>
  );
}

Issue

The problem is I want the lower div to get "carried along" with the upper div, so that there is no whitespace between them.

Note that setting NORMAL_CONTENT_HEIGHT to some large value (like 10000) works, but the animation is inconsistent with different CONTENT_HEIGHTs (and is not a solution).

How do you transition with no whitespace between the upper and lower divs, using css only?

Or is this not possible?