How do I align the text vertically with the check box in this list-item?

I am referencing a codepen sample that shows a list of ionic checkboxes that allow swipe and delete functionality.

The ONLY issue I am having is that the styling gets all messed up when this functionality is added. The checkbox text is not vertically lined up with the check box like I need it to. It should be to the right and vertically aligned with the checkbox icon

You can view the sample codepen here and use that to mess with the styling.

The ion-list markup looks like the following:

<ion-list show-delete="false"
            on-delete="onItemDelete(item)"
            can-swipe="true"
            option-buttons="itemButtons">

    <ion-item ng-repeat="item in items" item="item">
       <label class="checkbox">
        <input type="checkbox" ng-click="clickItem(item); $event.stopPropagation();" ng-model="item.checked">
        Item {{ item.id }}
      </label>

       <ion-option-button class="button-assertive icon ion-trash-a">
    </ion-item>

  </ion-list>

Wrong

enter image description here

Right

enter image description here

<label class="checkbox">
  <input type="checkbox" ng-click="clickItem(item); $event.stopPropagation();" ng-model="item.checked" style="display:block;float:left;">
  <span style="display:block;float:left;line-height:28px;margin-left:10px;">Item {{ item.id }}</span>
</label>

Hi include this css in your css file

.checkbox input, .checkbox-icon {
  display: inline-block;
  vertical-align: middle;
}

also you can modify the spacing and color using css.

You're using angular and ionic... Keep up the good standing and use flex elements :) https://css-tricks.com/snippets/css/a-guide-to-flexbox/