Make ionic-nav-title extend all the way to the right

ionic-v1
1

Here is my view’s code

<ion-view class="locations-view">
<ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-title>
    <div class="search-bar">
        <label class="item-input-wrapper">
            <i class="icon ion-ios-search placeholder-icon"></i>
            <input type="search" placeholder="Search for locations">
        </label>
        <button class="button button-clear button-positive" ng-show="search.focus" ng-click="cancelSearch()">Cancel</button>
    </div>
</ion-nav-title>

You can take a look at the following pen

I want the nav title to expand all the way to the right because I don’t have the right nav buttons. I have tried to set the right css attribute to 0 but that does not work.

How can I expand the search input all the way to the right?

2

This is solved by the following pen