基于Material-UI+React实现根据Checkbox标签长度动态切换布局的方案咨询

我现在的布局效果是这样的：
[当前布局：多个复选框按xs=12、sm=6、md=4的网格规则排列，部分长标签换行后，复选框与标签的垂直对齐出现不一致]

对应的Material-UI + React代码如下：

<FormControl>
  <FormGroup row>
    <Grid container>
      {options?.map((el, i) => (
        <Grid item xs={12} sm={6} md={4} key={i}>
          <FormControlLabel
            control={<Checkbox size="small" />}
            label={<Typography>{el.description}</Typography>}
          />
        </Grid>
      ))}
    </Grid>
  </FormGroup>
</FormControl>

我想要实现的效果是仅当复选框标签显示为多行时，所有复选框都单独占一行：
[目标多行标签布局：每个复选框独占一行，标签换行后与复选框顶部对齐，整体布局整齐统一]

如果标签是单行的，就保持原来的多列布局（比如一行3个），像这样的效果是符合预期的：
[单行标签布局：一行显示3个复选框，标签与复选框横向居中对齐，布局紧凑]

我的核心要求是：只要有至少一个复选框的标签因内容过长出现换行，所有复选框都要切换为每行一个的布局，绝对不能出现混合布局（比如有的行1个复选框，其他行有2或3个），要么统一每行3个，要么统一每行1个。

请问有没有最优的实现方案？哪怕需要修改现有HTML结构也完全可以。

备注：内容来源于stack exchange，提问作者splunk