Me gustaría realizar una ventana de consola como la ventana de consola en VS Code.

En VS Code, cuando hacemos clic en Shift + Command + Y , se abre una ventana de consola debajo de la ventana de código. Hay varias características:

1. Toda la ventana está dividida en 2 partes. Tanto la ventana de código como la ventana de la consola pueden tener su desplazador a la derecha.
2. La apariencia de la ventana de la consola cambia el tamaño de la ventana de código.
3. Hay un divisor horizontal que podría cambiar el tamaño de la ventana de la consola (y la ventana de código).

Traté de crear un codesandbox . Pero no tiene la función 2 y la función 3.

¿Alguien podría ayudar?

 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> </> ); }