How to align control in headerToolbar SAPUI5 - sapui5

Question

I've multiple control in one headerToolbar. I want to align one of them (Seach Field) at the right most. both images are from two different screen size. I use because when i decrease the screen size seachfield should not hide and come at next line.
I want to keep seach field at right most.
the code for this is
<headerToolbar>
<Toolbar id="dsdfgfanfgjd">
<content>
<HBox width='100%' wrap='Wrap'>
<items>
<FormattedText class="customPanelHeader"
htmlText=""/>
<ToolbarSpacer>
<layoutData>
<OverflowToolbarLayoutData priority="NeverOverflow" minWidth="22px"/>
</layoutData>
</ToolbarSpacer>
<SearchField id="searchFilter" placeholder="filter value" value="{/searchFilter}" width="12em"
liveChange=".onChangedSearchFilter" valueLiveUpdate="true"/>
</items>
</HBox>
</content>
</Toolbar>

Answer 1

To keep the SearchBox at the right end irrespective of the screen size, use below code:
<Toolbar height='auto'>
<content>
<HBox width='100%' wrap='Wrap'>
<items>
<Text text='text0' width='3rem' />
<Text text='text1' width='3rem' />
<Text text='text2' width='3rem' />
<Text text='text3' width='3rem' />
<Text text='text4' width='3rem' />
<Text text='text5' width='3rem' />
<Text text='text6' width='3rem' />
<Text text='text7' width='3rem' />
<Text text='text8' width='3rem' />
<Text text='text9' width='3rem' />
<Text text='text10' width='3rem' />
<Text text='text11' width='3rem' />
<Text text='text12' width='3rem' />
<ToolbarSpacer></ToolbarSpacer>
<HBox justifyContent='End'>
<layoutData>
<FlexItemData
growFactor='1'>
</FlexItemData>
</layoutData>
<Input id="searchFilter" class="searchFilterInput"
placeholder="filter value" value="{/searchFilter}" width="100%"
liveChange=".onChangedSearchFilter" valueLiveUpdate="true" />
<core:Icon class="searchFilterIcon" size="1.75rem"
src="sap-icon://search" tooltip="search" />
</HBox>
</items>
</HBox>
</content>
</Toolbar>