亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

<p>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? </p> <p> <pre class="brush:js;toolbar:false;">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 ( <> <div className="Order"> <OrderPanel /> <OrderMenu/> </div> </> ); }; 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 ( <> <div className="Order-Menu"> <Container>Order Menu</Container> </div> </> ); } 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 ( <> <div className="Order-Panel"> <Container>Order Panel</Container> </div> </> ); } export default OrderPanel;</pre> <pre class="brush:css;toolbar:false;">.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; }</pre> </p>

<Grid container spacing={2}>
    <Grid item xs={6}>
      <Item>xs=6</Item>
    </Grid>
    <Grid item xs={6}>
      <Item>xs=6</Item>
    </Grid>
</Grid>