How to display 2 different containers side by side in React?-PHP Chinese Network Q&A

I want to place the order panel and order menu side by side, they are two different components (containers). In my CSS I tried display: inline-block and flex-direction:row. I've tried flex on the parent component (Order) but it reduces the width of both components. This is such a simple thing but I can't do it. Can someone guide me to find the error?

import React from "react"; import Container from "@material-ui/core/Container"; import Stack from "@mui/joy/Stack"; import OrderPanel from "./OrderPanel"; import OrderMenu from "./OrderMenu"; import "./Order.css"; function Order() { return ( <>    
  ); }; export default Order; import React from "react"; import Container from "@material-ui/core/Container"; import Stack from "@mui/joy/Stack"; import OrderPanel from "./OrderPanel"; import "./Order.css"; function OrderMenu() { return ( <>  Order Menu 
  ); } export default OrderMenu; import React from "react"; import Container from "@material-ui/core/Container"; import Stack from "@mui/joy/Stack"; import "./Order.css"; import Order from "./Order"; function OrderPanel() { return ( <>  Order Panel 
  ); } export default OrderPanel;

.Order { background-color:darkkhaki; height: 50%; flex-direction: row; } .Order-Panel{ background-color: beige; margin-left: 2vw; margin-right: 60vw; margin-top: 2vh; height: 60vh; width: 50vh; flex-direction: row; display: inline-block; } .Order-Menu{ background-color: aquamarine; margin-top: 2vh; margin-left:2vw; height:10vw; width: 45vh; display: inline-block; flex-direction: row; }