Styled Paper - Copy this React, Mui Component to your project

<Grid container spacing={3} sx={{ width: '100%' }}> <Grid xs={12} md={8}> <Box> <Box sx={{ typography: 'h5', mb: 1 }}>Description</Box> <Box sx={{ typography: 'body2', color: 'text.secondary', maxHeight: 300, overflow: 'auto', }} > {info.about || 'No description available No description available No description available No description available '} </Box> </Box> </Grid> <Grid xs={12} md={4}> <Box sx={{ bgcolor: '#B0E4D2', borderRadius: 2, p: 4, height: 160, display: 'flex', flexDirection: 'column', }} > <Box sx={{ typography: 'h6', mb: 1 }}>Support</Box> <Stack spacing={1}> <Stack direction="row" spacing={1} alignItems="center"> <Iconify icon="material symbols:mail outline rounded" width={20} /> <Box sx={{ typography: 'body2' }}>{info.supportEmail || 'N/A'}</Box> </Stack> <Stack direction="row" spacing={1} alignItems="center"> <Iconify icon="solar:phone linear" width={20} /> <Box sx={{ typography: 'body2' }}>{info.supportPhone || 'N/A'}</Box> </Stack> </Stack> </Box> </Grid> </Grid> the problem here is that when the size of description is less then the support section shifts left