React Material UI radio buttons look disordered

Question

I created multiple Radiogroup in each row. Each row consist of 3 FormControlLabel:

import React, { Component } from 'react'
import FormControl from '@material-ui/core/FormControl';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Box from "@material-ui/core/Box";

{/* In class, render method */}
const {values, handleChange} = this.props;

<div>
    <FormControl component="fieldset">
        <RadioGroup row
        aria-label="survey"
        name="survey"
        onChange={handleChange('survey')}
        value={values.survey}
        >
            <FormControlLabel
            value="comedy"
            control={<Radio />}
            label={<div style={{ fontSize: '1.5rem' }}>Comedy</div>} 
            labelPlacement="Comedy"
            />

            <Box mx="4rem" />

            <FormControlLabel
            value="crime"
            control={<Radio />}
            label={<div style={{ fontSize: '1.5rem' }}>Crime</div>} 
            labelPlacement="Crime"
            />

            <Box mx="4rem" />

            <FormControlLabel
            value="drama"
            control={<Radio />}
            label={<div style={{ fontSize: '1.5rem' }}>Drama</div>} 
            labelPlacement="Drama"
            />
        </RadioGroup>
    </FormControl>
</div>

I created this code multiple times and the output is:

I want to order these radio buttons column by column. I want all buttons to start at the same level (align). How can I achieve this?

Answer 1

I solved the problem. I reordered RadioGroup as column and totally there are 3 columns. All column elements start at the same level. Then, I changed the RadioGroup to FormGroup and Radio buttons to Checkbox buttons. This is my changed code:

<FormControl component="fieldset">
    <FormGroup column
        aria-label="survey"
        name="col1"
        onChange={handleChange('survey')}
        style={{marginRight: '4rem'}}
        value={values.survey}
    >
        <FormControlLabel
            value="absurdist"
            control={<Checkbox/>}
            label={<div style={{ fontSize: '1.5rem' }}>Absurdist</div>}
            labelPlacement="Absurdist"
        />

        <FormControlLabel
            value="action"
            control={<Checkbox />}
            label={<div style={{ fontSize: '1.5rem' }}>Action</div>} 
            labelPlacement="Action"
        />

        <FormControlLabel
            value="adventure"
            control={<Checkbox />}
            label={<div style={{ fontSize: '1.5rem' }}>Adventure</div>} 
            labelPlacement="Adventure"
        />

        <FormControlLabel
            value="comedy"
            control={<Checkbox />}
            label={<div style={{ fontSize: '1.5rem' }}>Comedy</div>} 
            labelPlacement="Comedy"
        />

        <FormControlLabel
            value="crime"
            control={<Checkbox />}
            label={<div style={{ fontSize: '1.5rem' }}>Crime</div>} 
            labelPlacement="Crime"
        />

        <FormControlLabel
            value="drama"
            control={<Checkbox />}
            label={<div style={{ fontSize: '1.5rem' }}>Drama</div>} 
            labelPlacement="Drama"
        />

        <FormControlLabel
            value="fantasy"
            control={<Checkbox />}
            label={<div style={{ fontSize: '1.5rem' }}>Fantasy</div>} 
            labelPlacement="Fantasy"
        />
    </FormGroup>
</FormControl>