Grid system - getting column titles to match up with content

ionic-v1
1

I am having some trouble with the grid system and the ion-list.Maybe I’m over thinking this but I can seem to get the column titles to consistently align with the rows. I think the ion-option-button is taking up space from the grid. But is there a way around this?

Here’s a screenshot of what I mean:
image

<ion-list show-delete="false" show-reorder="false">
    <ion-item class="item item-divider item-light">
        <div class="row row-center minimal-padding">
            <div class="col col-20"><h3>Name</h3></div>
            <div class="col col-20"><h3>Type</h3></div>
            <div class="col col-20"><h3>Price</h3></div>
            <div class="col col-20"><h3>Shares</h3></div>
            <div class="col col-20"><h3>Filled</h3></div>
        </div>
    </ion-item>
    <ion-item ng-repeat="buyOrder in vm.buyOrders" item="buyOrder" class="item item-text-wrap">
        <div class="row row-center">
            <div class="col col-20"><h4>{{buyOrder.Name}}</h4></div>
            <div class="col col-20"><h4>{{buyOrder.OrderType}}</h4></div>
            <div class="col col-20"><h4>{{buyOrder.Price}}</h4></div>
            <div class="col col-20"><h4>{{buyOrder.NumberOfShares}}</h4></div>
            <div class="col col-20"><h4>{{buyOrder.oShares}}</h4></div>
        </div>
        <ion-option-button class="button-assertive" ng-click="delete(buyOrder)">Cancel </ion-option-button>
    </ion-item>
</ion-list>