<ion-item> with multiple input children and ion-reorder-button is not staying formatted properly

ionic-v1
1

Hey guys. I’ve got a problem that I keep running into. It seems that having list items with inputs and option-buttons is a bad mix, but I’d like to find a way to make it work. Here is my mark up.

<ion-list show-reorder="data.reorder">
	<ion-item class="row" ng-repeat="(letter, bounds) in scale">
		<div class="col"><input type="text" class="center" ng-model="letter" name="grade_name" required></div>
		<div class="col" ng-repeat-start="bound in bounds"><input type="text" class="center" ng-model="bound.upper" name="upper" required></div>
		<div class="col" ng-repeat-end><input type="text" class="center" ng-model="bound.lower" name="lower" required></div>
		<!--
		<ion-reorder-button class="ion-navicon float"
                    on-reorder="reorderItem(letter, $fromIndex, $toIndex)">
		</ion-reorder-button>
	-->
	</ion-item>
</ion-list>

Basically this generates a list of three inputs corresponding to a letter grade, upper grade bound and lower grade bound. It looks and works great until I throw in the ion-reorder-button at the bottom. All of the input elements behave as if they are block elements as in the image below.

I tried giving a class to the columns so that they were inline-blocks which did work, but this generated the following which is ugly and not what I am looking for, aha.

There has to be a way to do this! Appreciate any help :smile: