Ionic Checkbox height disproportional

I'm using the following code to render checkboxes in a row

                <label class="row item item-input ">
                <span class="item-text-wrap col col-50 input-label">Type Of Inspection</span>
                <div class="col col-50">
                    <div class="item-text-wrap row responsive-md">
                        <ion-radio  name="typeins" ng-model="form6.type" ng-value="'Monthly'">Monthly</ion-radio>
                        <ion-radio  name="typeins" ng-model="form6.type" ng-value="'Yearly'">Yearly</ion-radio>
                        <ion-radio  name="typeins" ng-model="form6.type" ng-value="'Periodic'">Periodic Discharge</ion-radio></div>
                </div>
            </label>

My app's background is black and the checkboxes are white. When the device width/height is lowered as can be seen in this ionic playground link the checkbox with more text keeps it's height while the others are shorter than it. The behavior can be seen in the attached screenshot. How to make the other's height equal the biggest checkbox?