Placing 2 divs side by side using mui

Question

Is there some way to use the styled utility from mui to place 2 divs side by side?

None of the examples in the documentation cover this particular use case.

The answers here and here address this, but not within the context of mui / material ui.

I tried the following, but the Box elements end up on separate lines:

import React from 'react';
import Box from "@mui/material/Box";
import { styled } from "@mui/material/styles";
import { Container } from "@mui/material";

const Wrapper = styled(Box)({
  display: "grid",
});

const App = (props) => {
  return (
    <Container>
      <Wrapper>
        <Box>text here</Box>
        <Box>more text</Box>
      </Wrapper>
    </Container>
  )
}

export default App

How can I modify the above code to get both lines of text on the same line?

Can this be re-opened now that a reproducible example was added? — Woodchuck, Jan 11 '23 at 17:35
Mui has a component https://mui.com/material-ui/react-stack/ — Seryoga, Aug 03 '23 at 17:49
Can this question be re-opened now that a reproducible example was added? — Woodchuck, Aug 03 '23 at 22:30

score 2 · Accepted Answer · answered Nov 29 '22 at 04:47

There are multiple ways. You can use Grid, Box, and Styled components.

Here are two examples using Grid and Box with styled components.

A working example on Codesandbox

import * as React from "react";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
import { styled } from "@mui/material/styles";
import { Container } from "@mui/material";

const Wrapper = styled(Box)({
  display: "grid",
  gridTemplateColumns: "repeat(2, 1fr)",
  gridGap: 8,
  marginTop: 16
});

export default function App() {
  return (
    <Container>
      <Grid xs={12} sx={{ border: "1px solid #ccc" }} container>
        <Grid xs={6} sx={{ border: "1px solid #ccc" }} item>
          div one
        </Grid>
        <Grid xs={6} sx={{ border: "1px solid #ccc" }} item>
          div two
        </Grid>
      </Grid>
      <Wrapper>
        <Box>div one</Box>
        <Box>div two</Box>
      </Wrapper>
    </Container>
  );
}

This is exactly what I needed. Someone please consider reopening this question now that I've added a minimal reproducible example. Thanks! — Woodchuck, Nov 29 '22 at 16:29

Placing 2 divs side by side using mui

1 Answers1