Styling of input groups wiht iron-input

[phun-ky]

We have a scenario where we have a styleguide requiring this setup to group an input-element and a button-element together, where the input has rounded corners left hand side, and the button has rounded corners right hand side.

<div class="rl-search rl-search--frontpage">
  <input type="search" placeholder="Search with number, name, etc." />
  <button class="rl-button rl-button--primary" type="button">Search</button>
</div>

But with iron-input requires this markup:

<div class="rl-search rl-search--frontpage">
  <iron-input .../>
    <input type="search" placeholder="Search with number, name, etc." />
  </iron-input>
  <button class="rl-button rl-button--primary" type="button">Search</button>
</div>

Resulting in a ruined UI, because the markup is not correct. I am reluctant to create a "hack" for this, using the iron-input selector, is there a better way to fix this?

Possibly related to #118

cc @estene