reactjs - 如何在框下的同一行相对两侧对齐文本和文本按钮

Question

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

我需要的是“使用鼠标或触摸板签名”。和“重做签名”在同一行，但在对面的那个框下面。

我很难做到，代码如下

我尝试了各种解决方案，这是我能得到的最接近的解决方案，但不能让按钮留在框下方作为文本的另一侧。

链接到CodeSandbox

反应 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>

这个的CSS

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),
  },