How to display inline Autocomplete component? - reactjs

Question

I'd like to display inline the Autocomplete component, either alonside other Autocomplete components and/or any other React MUI components.
Starting from the example about countries from the doc:
In index.js my first attempt was the following:
import * as React from "react";
import ReactDOM from "react-dom/client";
import { StyledEngineProvider } from "#mui/material/styles";
import Demo from "./demo";
import TextField from "#mui/material/TextField";
ReactDOM.createRoot(document.querySelector("#root")).render(
<StyledEngineProvider injectFirst>
<Demo />
<Demo />
<TextField />
<TextField />
</StyledEngineProvider>
);
with this outcome:
As you can see, while a component like TextField is automatically displayed inline, we cannot say the same thing for Autocomplete.
So, my second attempt was to force the inline property by a Box as shown in the doc:
import * as React from "react";
import ReactDOM from "react-dom/client";
import { StyledEngineProvider } from "#mui/material/styles";
import Demo from "./demo";
import TextField from "#mui/material/TextField";
import Box from '#mui/material/Box';
ReactDOM.createRoot(document.querySelector("#root")).render(
<StyledEngineProvider injectFirst>
<Box component="div" sx={{ display: 'inline' }}><Demo /></Box>
<Box component="div" sx={{ display: 'inline' }}><Demo /></Box>
<TextField />
<TextField />
</StyledEngineProvider>
);
Result: even in this case nothing changed.
I cannot figure out what is wrong. Am I missing something?

Answer 1

You may give a try to Stack Component available in doc.
<Stack direction="row" spacing={2}>
<Demo />
<Demo />
</Stack>
Edit:
I have looked at your Demo.js and found this solution. It may help you.
Adding this line in <Autocomplete>
sx={{display : 'inline-flex', width : '50%' }}
may solve your problem as it does in sandbox.
Here's sandbox.
Also width may cause problem.