Using md-chips in forms with other inputs

Question

I am trying to make use of md-chips alongside other inputs in a form that are inside md-input-containers.

I have had to add my own css hacks to get the placeholder text of the input, plus padding and margin applied to get it to look as close enough to an input inside an md-input-container as best I can.

I know I can't get md-chips to work inside an md-input-container (I dont think its supported yet)

Here is how I have an input followed by an md-chips appearing:

<div layout="row">
    <md-input-container flex>
        <label translate>Name</label>
        <input ng-model="ctrl.name">
    </md-input-container>
    <div class="chips-container" flex>
        <md-chips ng-model="ctrl.fruitNames">
            <md-chip-template>
                <span><strong>{{$chip}}</strong></span>
            </md-chip-template>
            <input type="text" placeholder="Enter Something">
            <button md-chip-remove class="chip">
                <md-icon class="material-icons">clear</md-icon>
            </button>
        </md-chips>
    </div>
</div>

Working Codepen

Has anyone faced a similar situation needing to get md-chips with inputs aligning correctly alongside other inputs in similar layouts?

Just looking for suitable solutions, I can't see any combination examples on the Angular Material input demos.

Thanks