Material ui grid change content direction to row

I’m new to material ui and i created a grid that contains 2 components,an autocomplet and a button.these 2 are displayed one below the other,so i want to algin them in a row. Here’s how my code looks like:

<Grid item sm={4} xs={12} direction="row"><Autocomplete/><button/><Grid>

I tried direction=”row” but it doesn’t work. I would appreciate your help

Answer

I recommend you to use grid system same as technical documentation example shown below,

export default function BasicGrid() {
  return (
    <Grid container spacing={2}>
      <Grid item xs={8}>
        <Item>Autocomplete Here</Item>
      </Grid>
      <Grid item xs={4}>
        <Item>Button Here</Item>
      </Grid>
    </Grid>
  );
}

Here is working sandbox example.