I would like to realize a console window like the console window in VS Code.

In VS Code, when we click Shift+Command+Y, a console window is opened below the code window. There are several features:

1. The whole window is divided into 2 parts. Both the code window and the console window can have their scroller on the right.
2. The appearance of the console window resizes the code window.
3. There is a horizontal splitter that could resize the console window (and the code window).

I tried to create a codesandbox. But it doesn't have Feature 2 and Feature 3.

Could anyone help?

import { useState } from "react";
import { Button } from "@material-ui/core";

import "./styles.css";

export default function App() {
  const [textState, setTextState] = useState("off");

  const toggleText = () => {
    setTextState((state) => (state === "On" ? "Off" : "On"));
  };

  return (
    <>
      <Button variant="contained" color="primary" onClick={toggleText}>
        Toggle
      </Button>
      <div style={{ overflowY: "scroll", height: "300px", fontSize: "30px" }}>
        <h1>code 1</h1>
        <h1>code 2</h1>
        <h1>code 3</h1>
      </div>
      <div>
        {textState === "On" && (
          <div
            style={{ overflowY: "scroll", height: "200px", fontSize: "30px" }}
          >
            <h1>console 1</h1>
            <h1>console 2</h1>
            <h1>console 3</h1>
          </div>
        )}
      </div>
    </>
  );
}