I'm currently using the code below to display checkboxes in a row:
<label class="row item item-input ">
<span class="item-text-wrap col col-50 input-label">Inspection Type</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 with white checkboxes. However, when the device width/height is reduced as shown in this link to the Ionic playground, the checkbox containing more text retains its height while the others become shorter. This behavior is illustrated in the screenshot https://i.sstatic.net/LNuFa.png. How can I ensure that all checkboxes have equal heights?