Put Button and IconButton components in the same row

Question

So, I want to display a Button in the same row with an IconButton, they are in a Grid container with the prop align="center" and I think this might be what is causing the problem. I am a total beginner in material-ui, I tried multiple things but they didn't work, I need help!

CSS:

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

#app {
  width: 100%;
  height: 100%;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

JSX:

<Grid container spacing={1} align="center">
   <Grid item xs={12} direction="row">
      <Button
         variant="contained"
         color="secondary"
         onClick={this.leaveButtonPressed}
      >
      Leave Room
      </Button>
   </Grid>
   <Grid item xs={12}>
      <IconButton color="primary" onClick={() => this.updateShowSettings(true)}>
         <SettingsIcon />
      </IconButton>
   </Grid>
</Grid>

I hope I left the right amount of code, if you need more just ask, thanks already!

Answer 1

to place the Button in the same row with an IconButton, reduce the xs value as 12 is the max value and by giving it 12, it'll take the whole width of the parent. So, give it 6 and also the other item to 6.

<Box>
    <Grid container spacing={1} align="center" direction="row">
        <Grid item xs={6} >
            <Button
                variant="contained"
                color="secondary"
                onClick={this.leaveButtonPressed}>
                Leave Room
            </Button>
        </Grid>
        <Grid item xs={6}>
            <IconButton color="primary">
                <Settings />
            </IconButton>
        </Grid>
    </Grid>
</Box>

Here is the working demo: