对齐React Material UI中的文本

Question

我有一个非常简单的问题。我想将"01/01/2020"与"A00002"对齐。

请在这里查看我的代码沙盒点击这里

<div className={classes.root}>
<Typography variant="h6" className={classes.marginTop2}>
<span className={classes.fontBold}>Date:</span>{" "}
<span className={classes.marginLeft3}>01/01/2020</span>
</Typography>
<Typography variant="h6" className={classes.marginTop1}>
<span className={classes.fontBold}>Transaction Code:</span>{" "}
<span className={classes.marginLeft3}>A00002</span>
</Typography>
</div>

输出

Date:                01/01/2020
Transaction Code:    A00002

Answer 1

EDIT：以下是我的操作方法。我修改了marginLeft3类。还可以看看我的沙箱代码

marginLeft3: {
position: "absolute",
left: 200,
marginLeft: 3
},

沙盒

Answer 2

创建一个此类，而不是使用marginLeft3使用marginLeft120作为日期。

marginLeft120: {
marginLeft: 120
},