Yii2 ActiveField::checkboxList rendering is crooked - css

Question

Is there a simple way to fix this crooked rendering for checkboxlist?
This code:
<?= $form->field($model, 'targeting_gender')->checkboxList(['Male'=>'Male','Female'=>'Female','Unknown'=>'Unknown']) ?>
ends up in this:
The Problem is the differentiated lenghth of the labels.
Here is some CSS of the checkboxes:
type="checkbox"]:not(:checked), [type="checkbox"]:checked {
position: absolute;
opacity: 0;
pointer-events: none;
}
[type="checkbox"], [type="radio"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}
input[type="checkbox" i] {
background-color: initial;
cursor: default;
appearance: checkbox;
box-sizing: border-box;
margin: 3px 3px 3px 4px;
padding: initial;
border: initial;
}
input {
-webkit-writing-mode: horizontal-tb !important;
text-rendering: auto;
color: -internal-light-dark(black, white);
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
appearance: textfield;
background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
-webkit-rtl-ordering: logical;
cursor: text;
margin: 0em;
font: 400 13.3333px Arial;
padding: 1px 2px;
border-width: 2px;
border-style: inset;
border-color: -internal-light-dark(rgb(118, 118, 118), rgb(195, 195, 195));
border-image: initial;
}
PS: I'm using materializecss

Answer 1

My quick fix (because I'm not an CSS expert) is that:
<?= $form->field($model, 'targeting_gender')->checkboxList(
['Male'=>'Male ','Female'=>'Female ','Unknown'=>'Unknown'],
['encode'=>false])
?>
Which results in:
But if you have time and energy you could mess around with adding html-attributes to the labels and additional css:
<?= $form->field($model, 'targeting_gender')->checkboxList(
['Male'=>'Male','Female'=>'Female','Unknown'=>'Unknown'],
['encode'=>false, 'itemOptions'=>['labelOptions'=>['class'=>'fixed-width-label']]])
?>