在材料UI中，如何对齐表单元素，以使输入的起点垂直对齐

Question

请考虑以下组件

const styles = (theme) => ({
    simpleFormControl: {
        paddingRight: theme.spacing(2),
        paddingLeft: theme.spacing(2),
        [theme.breakpoints.down('sm')]: {
            marginLeft: theme.spacing(1),
            marginRight: theme.spacing(1),
        },
    },
    simpleFormLabel: {
        marginRight: theme.spacing(1),
    },
    simpleFormControlRoot: {
        flexGrow: 1,
        flexShrink: 0,
        minWidth: '10em',
    }
});

export const SimpleInlineFormControl = withStyles(styles)(function(props) {
    const {classes} = props;
    return <>
        <FormControl
            component={'fieldset'}
            margin="normal"
            fullWidth={true}
            style={style}
            className={classes.simpleFormControl}
        >
            <FormGroup>
                <FormControlLabel
                    label={'small'}
                    control={
                        <div className={classes.simpleFormControlRoot}>{
                            <Input
                                name={name}
                                type={'text'}
                                id={'small'}
                                value={'small'}
                                fullWidth={true}
                            />
                        }</div>
                    }
                    labelPlacement={"start"}
                    classes={{
                        label: classes.simpleFormLabel,
                    }}
                />
                <FormControlLabel
                    label={'very large label:'}
                    control={
                        <div className={classes.simpleFormControlRoot}>{
                            <Input
                                name={name}
                                type={'text'}
                                id={'large'}
                                value={'large'}
                                fullWidth={true}
                            />
                        }</div>
                    }
                    labelPlacement={"start"}
                    classes={{
                        label: classes.simpleFormLabel,
                    }}
                />
            </FormGroup>
        </FormControl>
    </>
}

这将显示一个带有2个输入的简单表格。输入的标签与Input元素内联。但是，问题在于实际数据未垂直对齐。 -输入元素本身将控制字段“推”到左侧。

如何使字段对齐正确？

我可以给输入元素一个静态宽度，甚至是屏幕的百分比（例如75%）。但是，这将意味着表单本身已正确地勾勒出轮廓，更重要的是：在小屏幕上，这可能意味着标签被包裹在多行中。