Expanding search bar with polymer and paper

I'm trying to integrate my custom search bar from my webpage into my toolbar, but so that it will expand when clicking on either the text area or a search icon.

I've seen how to do this with CSS and JQuery, however I am trying to get this to work with Paper material design and using Polymer.

Could anyone please give me a pointer?

Toolbar

<paper-toolbar>
    <paper-icon-button slot="top" icon="menu" paper-drawer-toggle></paper-icon-button>
    <div slot="top" class="title">Title</div>
    <paper-icon-button slot="top" icon="delete"></paper-icon-button>
    <paper-icon-button slot="top" icon="add">+</paper-icon-button>
    <paper-icon-button slot="top" icon="create"></paper-icon-button>          
</paper-toolbar>

Search Bar

<div>
    <paper-input class="inputBox"label="Search" id="pIn" on-keydown="checkForEnter" 
        auto-validate pattern="[0-9]*" error-message="numbers only please...">
        <iron-icon icon="av:mic" prefix></iron-icon>
        <div suffix>
            <paper-icon-button suffix icon="clear" id="clear" on-click="_clearInput"></paper-icon-button>
            <paper-icon-button on-click="returnPosts" icon="search"></paper-icon-button>
        </div>
        <div class="output"></div>
    </paper-input>
</div>

Any help would be greatly appreciated.

via physicsboy