angularjs - 他の入力を含むフォームで md-chips を使用する

Question

md-input-containers 内にある形式で、他の入力と一緒に md-chips を利用しようとしています。

入力のプレースホルダー テキストを取得するために、独自の css ハックを追加する必要がありました。さらに、パディングとマージンを適用して、md-input-container 内の入力にできるだけ近く見えるようにしました。

md-input-container 内で md-chips を動作させることができないことはわかっています (まだサポートされていないと思います)。

入力の後に md-chips が表示される方法は次のとおりです。

<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>

ワーキングコードペン

同様のレイアウトの他の入力と並んで入力が正しく配置された md チップを取得する必要がある同様の状況に直面した人はいますか?

適切なソリューションを探しているだけですが、Angular Material の入力デモに組み合わせの例が見当たりません。

ありがとう