Reactjs 如何将同一行上的文本和文本按钮对齐框下的相对边

在Material UI React中，我发现很难在同一行和框下对齐文本和文本按钮。在我现在所取得成就的截图中

我需要的是“使用鼠标或触摸板进行签名”和“重做签名”放在同一行，但在另一侧的框下

我很难做到这一点，代码如下

我尝试了各种解决方案，这是我能够得到的最接近的解决方案，但无法使按钮停留在文本的另一侧框下

链接到

反应HTML

<Box className={classes.counterSignatureContainer}>
          <Box className={classes.canvasContainer}>
            <canvas ref={canvasRef} height={158} width={510} />
          </Box>
        </Box>
        <Grid container spacing={3}>
          <Grid
            container
            direction="row"
            justify="space-between"
            alignItems="center"
          >
            <Grid item xs={6}>
              <Box className={classes.instructionContainer}>
                <Typography variant="caption">
                  <FormattedMessage
                    defaultMessage={'Sign using your mouse or touch pad.'}
                  />
                </Typography>
              </Box>
            </Grid>
            <Grid item xs={3}>
              <Box className={classes.redoContainer}>
                <Button
                  disabled={!signatureData}
                  color="primary"
                  title="Redo signature"
                  onClick={clear}
                  fullWidth={false}
                >
                  <FormattedMessage defaultMessage={'Redo signature'} />
                </Button>
              </Box>
            </Grid>
          </Grid>
        </Grid>
        <Box className={classes.countersignButtonContainer}>
          <Button
            disabled={!signatureData}
            color="primary"
            variant="outlined"
            title="Countersign"
            onClick={handleCountersign}
            fullWidth={false}
          >
            <FormattedMessage defaultMessage={'Countersign'} />
          </Button>
        </Box>

---

嗨！你能在沙箱中在线重现这个问题吗？嗨，我可以试试，然后在这里发布link@alisasani已添加到代码箱中，请检查

counterSignatureContainer: {
    textAlign: 'center',
    position: 'relative',
    margin: theme.spacing(8, 0, 0, 5),
    width: SIGNATURE_CONTAINER_WIDTH,
    height: 160,
    backgroundColor: '#E1E1E1',
  },
  canvasContainer: {
    position: 'relative',
    display: 'flex',
    flex: 1,
  },
  instructionContainer: {
    margin: theme.spacing(1, 6),
    color: '#393939',
  },
  countersignButtonContainer: {
    margin: theme.spacing(1, 6),
  },
  signatureContainer: {
    textAlign: 'center',
    position: 'relative',
    margin: theme.spacing(3, 5),
    width: 512,
    height: 160,
    backgroundColor: '#0000000A',
  },
  signature: {
    maxWidth: '100%',
    maxHeight: '100%',
  },
  redoContainer: {
    margin: theme.spacing(1, 0, 0, -1),
  },