Whenever an accordion expands in the same row in MUI, the height of the accordion will automatically increase. See below for the code snippet:
{[1,2,3,4,5].map((i)=>
<Accordion style={{backgroundColor: '#F9F9F9', borderRadius: 8, width: '45%', margin: '5px 0px'}}>
<AccordionSummary
expandIcon={<ExpandMoreIcon style={{borderRadius: 100, backgroundColor: '#F3F3F3'}}/>}
aria-controls={`panel${i}a-content`}
id={`panel${i}a-header`}
>
<Typography variant='body2' style={{fontSize: 13, color: '#3A3A3A', textAlign: 'justify', fontWeight: 400}}>
Are the Pack Benefits really free?
</Typography>
</AccordionSummary>
<AccordionDetails style={{ backgroundColor: 'white'}}>
<Typography variant='body2' style={{fontSize: 12, color: '#21212185', textAlign: 'justify'}}>
Yes! Choose any energy plan and enjoy the benefits.
</Typography>
</AccordionDetails>
</Accordion>
)}