Javascript 在输入线下方堆叠md芯片

我看到过一些问题，在保持输入顶部的同时垂直堆叠md芯片，但我想在输入线下堆叠md芯片，就像在google和pinterest中这样

我希望输入字段位于顶部，芯片应堆叠在该行下方
这里我给出了垂直堆叠的代码
多谢各位

angular
.module（'MyApp'，['ngMaterial']））
.controller（'demoCtrl'，函数（$scope）{
$scope.myChips=['AAA'，'BBB'，'CCC']；
});

md芯片{
清除：左；
}
.md芯片{
背景颜色：米色；
}
.md芯片.md芯片输入容器{
浮动：无；
}
.md芯片输入容器.md输入{
边框：1px纯黑！重要；
边缘顶部：8px；
}
{{$chip}
只需清除您编写的以下代码：

md-chip {
   clear: left;
}



angular
.module（'MyApp'，['ngMaterial']））
.controller（'demoCtrl'，函数（$scope）{
$scope.myChips=['AAA'，'BBB'，'CCC']；
});

.md芯片{
背景颜色：米色；
}
.md芯片.md芯片输入容器{
浮动：无；
}
.md芯片输入容器.md输入{
边框：1px纯黑！重要；
边缘顶部：8px；
}
{{$chip}
我已经找到了一种解决方案，一种黑客或任何通过不断改变我得到的属性的方法

这是密码笔

angular
.module（'MyApp'，['ngMaterial']））
.controller（'demoCtrl'，函数（$scope）{
$scope.myChips=['AAA'，'BBB'，'CCC']；
});

.md芯片{
背景颜色：米色；
显示：flex！重要；
柔性包装：包装；
}
.md芯片{
顺序：2；
}
.md芯片.md芯片输入容器{
顺序：1；
宽度：100%；
}
.md芯片输入容器.md输入{
边框：1px纯黑！重要；
边缘顶部：8px；
}

{{$chip}
不，它不起作用了。你能不能请一些代码笔来摆弄一下工作代码？我知道问题出在哪里了。只需清除编写md芯片的代码{clear:left；}我在这里编写了示例：