Aligning and Positioning Checkbox and Text in HTML and CSS

I am trying to align some check boxes and text using HTML and CSS - the current result I have achieved is this:

However, the positioning moves depending on the length of the text. I'm wanting to achieve something like this (ignore the competition name differences):

My current code is as followed (The HTML also contains AngularJS code, which you can ignore as I'm specifically looking at the HTML):

HTML:

<div ng-repeat="option in $ctrl.options">
<div class="acca-builder-header"></div>
<div class="acca-builder-content">
    <div class="acca-builder-option-item" ng-repeat="optionItem in option.options">
        <div class="acca-builder-option-item-checkbox">
            <input type="checkbox" id="test" value="test">
            <label for="test">
                <span class="acca-builder-option-item-text">
                    <!--If there is a text key, use that with translations, if not then use the competition stuff.-->
                     
                </span>
            </label>
        </div>
    </div>
</div>

CSS (including the custom checkbox code):

.acca-builder-content {
width: 100%;
background-color: white;
margin-bottom: 10px;
border: 1px solid #c8c8c8;
padding: 2px 2px;
}

.acca-builder-option-item {
width: 100%;
text-transform: uppercase;
color: #29235c;
border-bottom: 1px solid #c8c8c8;
height: 30px;
padding: 2px 5px;
font-size: 13px;
text-align: center;
}

.acca-builder-option-item-text {
    vertical-align: middle;
}

.acca-builder-option-item:last-child {
    border-bottom: none;
}

.acca-builder-option-item-checkbox {
input[type=checkbox] + label {
    display: block;
    margin: 0.2em;
    cursor: pointer;
    padding: 0.2em;
  }
  
  input[type=checkbox] {
    display: none;
  }
  
  input[type=checkbox] + label:before {
    content: "\2714";
    border: 0.1em solid #000;
    border-radius: 0.2em;
    display: inline-block;
    width: 1em;
    height: 1em;
    padding-left: 0.2em;
    padding-bottom: 0.3em;
    margin-right: 0.2em;
    vertical-align: bottom;
    color: transparent;
    transition: .2s;
  }
  
  input[type=checkbox] + label:active:before {
    transform: scale(0);
  }
  
  input[type=checkbox]:checked + label:before {
    background-color: MediumSeaGreen;
    border-color: MediumSeaGreen;
    color: #fff;
  }
  
  input[type=checkbox]:disabled + label:before {
    transform: scale(1);
    border-color: #aaa;
  }
  
  input[type=checkbox]:checked:disabled + label:before {
    transform: scale(1);
    background-color: #bfb;
    border-color: #bfb;
  }
}

What would the best way be to achieve this?

Should I just use a table with two columns and align the first column (checkbox) to the right and the second column (the competition names) to the left? Or is there a better way to do this using the display css attribute?

Or should I just align all of the text/checkbox left - then add a container around it and center the container?

Apologies if there is something exactly like this existing - I did search but could not find specifically to what I wanted.

Thank you.