Хорошая группа стиля использования флажка

Question

Итак, я создал многоступенчатую форму, содержащую на одной странице список флажков, которые может выбрать пользователь.

Мне не очень нравится внешний вид, как вы можете видеть ниже:

Лучше было бы выглядеть так:

Вот код, который у меня есть.

import React from 'react';
import TextContents from '../../assets/translations/TextContents'
import './CreateClassOnBoardingForm.css';
import { waitForDomChange } from '@testing-library/react';
import Checkbox from '@material-ui/core/Checkbox';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';

class ClassCreationFormStep11 extends React.Component {
    render() {

        const categoryList = [
            { value: 'CRAFT_AND_TRADE', name: 'Craft & Trades' },
            { value: 'CODE', name: 'Code' },
            { value: 'MECHANICAL', name: 'Mechanical'},     
            { value: 'SCIENCE', name: 'Science' }, 
            { value: 'BUSINESS', name: 'Business' },
            { value: 'CIVICS', name: 'Civics' },
            { value: 'COMMUNICATION', name: 'Communication' },
            { value: 'EXPLORATION', name: 'Exploration' },
            { value: 'FOOD', name: 'Food' },
            { value: 'CULTURE', name: 'Culture' },
            { value: 'PHILOSOPHY', name: 'Philosophy' },
            { value: 'WELLNESS', name: 'Wellness' },
            { value: 'PLAY', name: 'Play/Gaming' },
            { value: 'DANCE', name: 'Dance' },
            { value: 'MUSIC', name: 'Music' },
            { value: 'ART', name: 'Art' },
            { value: 'PHOTO', name: 'Photography' },
            { value: 'FILM', name: 'Film' },
            { value: 'DESIGN', name: 'Design' },
        ];

      if (this.props.currentStep !== 11) { // Prop: The current step
        return null
      }
      // The markup for the Step 1 UI
      return(
        <div className="form-group">
          <label className="label-txt" htmlFor="typeOfClass">{TextContents.FormClassCategories}
                <FormControl component="fieldset">
                    <FormGroup aria-label="position" row>
                        {categoryList.map((e, key) =>  { 
                          return <FormControlLabel
                          value={e.value}
                          control={<Checkbox color="primary" />}
                          label={e.name}
                          labelPlacement="end"
                        />
                      })}
                    </FormGroup>
                  </FormControl>;
          </label>
        </div>
      )
    }
  }

  export default ClassCreationFormStep11

и css это

.left-white-button {
  border-radius: 21px; 
  background-color: ffffff; 
  border-color: #ffffff;
  font-family: Source Sans Pro;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  color: #ff7255;
  box-shadow: 0px 8px 18px 0 rgba(0,0,0,0.14);
  padding-top: 5px;
  padding-bottom: 7px;
  padding-left: 20px;
  padding-right: 20px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.right-white-button {
  border-radius: 21px; 
  background-color: ffffff; 
  border-color: #ffffff;
  font-family: Source Sans Pro;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  color: #ff7255;
  box-shadow: 0px 8px 18px 0 rgba(0,0,0,0.14);
  padding-top: 5px;
  padding-bottom: 7px;
  padding-left: 20px;
  padding-right: 20px;
  position: absolute;
  bottom: 0;
  right: 0;
}

.form-btn-container {
  margin-top: 5rem;
  height: 40px; 
  width: 600px;
  position: relative;
  background-color: transparent;
}

.form-container {
  position: relative ;
  margin-top: 60px;
}

.option-checkbox {
  border-radius: 21px; 
  background-color: ffffff; 
  border-color: #ffffff;
  font-family: Source Sans Pro;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  color: #ff7255;
}

.label-txt {
    font-family: Source Sans Pro;
    font-size: 30px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 0.77;
    letter-spacing: -0.6px;
    text-align: left;
    color: #333333;
}

.form-control-village {
    font-family: Source Sans Pro;
    font-size: 16px; 
    line-height: 1.6;
    text-align: left;
    color: #616161;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    background-color: #ffffff;
    border-bottom: 3px solid #ff7255;
    border-top: 0px none;
    border-left: 0px none;
    border-right: 0px none;
}

Также есть способ получить все значения в одной переменной?

Любая идея чтобы сделать его красивым, как показано на картинке. Плевать на +

Спасибо