My goal is to line up the label and radio button inside a FormControlLabel component so that the label occupies the same width regardless of its content. The current appearance can be seen below:
https://i.stack.imgur.com/GhXed.png
Below is the code I am using:
<RadioGroup row>
<FormControl>
<FormControlLabel
value={first_column_day}
control={
<Radio
value={first_column_day}
/>
}
label={<Typography variant={"subtitle2"}>{first_column_day}</Typography>}
labelPlacement="start"
/>
</FormControl>
<FormControl>
<FormControlLabel
value={second_column_day}
control={
<Radio
value={second_column_day}
/>
}
label={<Typography variant={"subtitle2"}>{second_column_day}</Typography>}
labelPlacement="start"
/>
</FormControl>
</RadioGroup>
I have attempted adding justifyContent for FormControl:
<FormControl style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
I also tried wrapping Typography in a div:
<div><Typography variant={"subtitle2"}>{first_column_day}</Typography></div>
However, these approaches did not yield the desired result. The only method that worked was setting a fixed width for the Typography element like this:
<Typography style={{ width: 75 }} variant={"subtitle2"}>{first_column_day}</Typography>
Unfortunately, I am hesitant to use this solution as it lacks responsiveness. Setting the width to 100% also proved ineffective.