выровнять ящики для материала по вертикали

Question

Я делаю блок управления в соответствии с пользовательским интерфейсом материала, и у меня есть компонент, называемый контроллерами, в котором есть 4 компонента контроллера, проблема в том, что я хочу, чтобы кнопки были выровнены вертикально, чтобы длина меток не сдвигала кнопки вперед , и я не хочу использовать таблицу только с помощью коробки, и вот мой код. Я использовал justifyContent, alignItems, alignContent и ничего не работает

любая помощь?

вот компонент контроллера:

import * as React from 'react';
import Buildcontroller from "./buildcontroller";
import Box from "@material-ui/core/Box";

export function Buildcontrols(props) {
return (
    <Box pl={5} mt={-2}>
        <h4>price: {props.totalprice} $</h4>


            {props.itemsList.map((p =>

             //itemsList is an array holding 4 names 

                    <Buildcontroller itemCount={props.itemsObject[p]} label={p} less={() => {
                        props.less(p)
                    }} more={() => {
                        props.more(p)
                    }}/>
            ))}

    </Box>
);
};

и вот компонент контроллера:

import * as React from 'react';
import Button from "@material-ui/core/Button";
import Box from "@material-ui/core/Box";

export default function Buildcontroller(props) {

return (
    <Box display="flex" mb={1}>
            <Box mr={4} mt={0.5} row={1}>
                {/*row=1*/}

                    {props.label}
            </Box>
        <Box flexShrink={1}
             justifyContent="flex-end"
             alignItems="flex-end"
             alignContent="flex-end"
        >
            <Button variant={"contained"} color={"secondary"} disabled={(props.itemCount === 0)}
                    onClick={props.less}>less</Button>
            <Button variant={"contained"} color={"primary"} onClick={props.more}>more</Button>
        </Box>

    </Box>

);
};