How to Align Title, Input Box & Ionic Icon Side by Side in Ionic 3 - ionic-framework

Question

So far, I have been able to figure out how to left align Title and right align icon, but the problem is with input box in the center which I am not able to figure out.
Expected output Image is given below.
My Home Page Code:
<ion-header>
<ion-navbar>
<ion-title text-center>Page Title</ion-title>
<ion-buttons end>
<button ion-button icon-only>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>

Answer 1

Just fixed it on my own!
Home HTML file
<ion-header>
<ion-navbar>
<ion-title>Title
<ion-input type="text"></ion-input>
</ion-title>
<ion-buttons end>
<button ion-button icon-only>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
Variable.scss file
$text-input-md-margin-top: 0px;
$text-input-md-margin-bottom: 0px;
$text-input-md-margin-start: 0px;
$text-input-md-margin-end: 0px;
Home.scss file
ion-input
{
background-color: white;
border-radius: 5px;
display: inline;
color: black;
margin-left: 0.5em;
}
.text-input-md
{
width: 60%;
}