Usé Stack, Divider Box y Grid, tengo problemas con el espaciado, vea el resultado a continuación
<Stack direction="row" spacing={1}> <Divider> <Box py={3} sx={{width: '100%', border: 1}}> <Stack direction="row" justifyContent="flex-end" alignItems="center" spacing={3} sx={{ marginBottom: '9px', width: 150 }} > <Grid container spacing={3} sx={{float: 'right'}} justify="flex-end"> <Grid item xs sx={{float: 'right'}}> <LocalFireDepartmentIcon color={selectedThreat ? '#E01C1C' : 'disable'} /> <Typography variant="subtitle2" sx={{ letterSpacing: '1.5px', marginLeft: '4px' }} className={classes.upperCase} > {name} </Typography> </Grid> <Grid item xs sx={{float: 'right'}}> <Typography variant="p" sx={{ letterSpacing: '1.5px', textDecoration: "underline", color: '#191F25', fontSize: '14px', lineHeight: '20px' }} onClick={handleOpen} > Cancel </Typography> </Grid> </Grid> </Stack> </Box> </Divider> </Stack>Resultado Esperado
resultado actual