MaterialUI Grid direction=row not working - reactjs

Question

I am trying to make a grid of buttons aligned in specific order, but I am having difficulties with making both buttons on the same row:
Expected:
Instead, row2 (the two columns in red), appear in a column direction (the second column goes bellow the first columnt, screenshot: http://prntscr.com/x4amxf) and not in a row direction like I am expecting them to be.
Here is my grid:
<Grid container direction="column"> // this is another container that wraps everything, not in the picture above
<Grid item container direction="row"></Grid> // another row of stuff, not related, works just fine
// picture represents this grid
<Grid item container direction="row" spacing={1}>
<Grid align="center" direction="row" justify="center" item container xs={1}>
<Grid item container direction="column">
<Grid item></Grid>
<Grid item></Grid>
</Grid>
<Grid item container direction="column">
<Grid item></Grid>
<Grid item></Grid>
</Grid>
</Grid>
</Grid>
</Grid>
I have tried to increase xs to 2 to see if its a size issue, but it just stretched the items.
And the actual code (but the structure above represents the same):
<Grid container direction="column">
<Grid item container>
</Grid>
<Grid item container direction="row" spacing={1}>
<Grid item>
<AddPrice open={open} handleClosePopup={handleClose} item={item} />
<IconButton variant="contained" onClick={handleClose}>
<AddCircleOutlineIcon color="primary" style={{ fontSize: 40, marginRight: 5 }} />
<Typography>Цена</Typography>
</IconButton>
</Grid>
{item.prices.map(({ price, quantity }) => (
<React.Fragment key={`itemPrice1${price}`}>
<Grid align="center" direction="row" justify="center" item container xs={1}>
<Grid item container direction="column">
<Grid item>
<Button>
<Grid item direction="column" container>
<Grid item>
<Typography variant="button">{price} лв.</Typography>
</Grid>
<Grid item>
<Typography variant="button">
{quantity.available} {item.quantity.type}.
</Typography>
</Grid>
</Grid>
</Button>
</Grid>
</Grid>
{editing && (
<Grid item container direction="column">
<Grid item>
<IconButton style={{ border: "1px solid #f44336" }} variant="contained" color="secondary">
<DeleteForever color="secondary" style={{ fontSize: 30 }} />
</IconButton>
</Grid>
<Grid item>
<IconButton style={{ border: "1px solid #3f51b5" }}>
<EditIcon color="primary" style={{ fontSize: 30 }} />
</IconButton>
</Grid>
</Grid>
)}
</Grid>
</React.Fragment>
))}
</Grid>
<Grid item container></Grid>
</Grid>
Basically, the editing buttons, should appear on the right of the price buttons.
Sandbox: https://codesandbox.io/s/material-demo-forked-6v50s?file=/demo.js

Answer 1

If I understood the task correctly, you have to refactor your layout like this:
<Grid container direction="column">
<Grid item container direciton="row">
Row1
</Grid>
<Grid align="center" direction="row" container>
<Grid item xs={2} style={{ border: "1px solid black" }}>
<Grid item>BR</Grid>
<Grid item>TXT</Grid>
</Grid>
<Grid item xs={2} style={{ border: "1px solid black" }}>
<Grid item>EDIT</Grid>
<Grid item>DELETE</Grid>
</Grid>
</Grid>
</Grid>
Please, check out the example