Reactjs 如何使搜索栏中的过滤器不'；基于滤波器长度的t移位

我想制作一个类似亚马逊的搜索栏，但是现在，每当我选择一个过滤器时，它都会将整个搜索栏向右移动

我正在使用材料来完成此操作

例如：选择“全部”作为过滤器，然后选择“衣服”作为过滤器将使所有内容向右移动，因为“全部”小于“衣服”。我想显示整个字符串，而不是隐藏它

现在我的代码看起来有点像这样：

<Grid item>
<filter/>
</Grid>
<Grid item md={9}>
<searchbar/>
</Grid>
<Grid item>
<submit/>
</Grid>

设置其他两项的列宽是否有帮助？确实如此，但问题是我希望它的过滤盒大小能够根据字符串长度做出响应。它目前会这样做，但由于搜索栏的大小，它会移动整个搜索栏。如果你查看亚马逊的搜索栏，它会改变框的大小，同时保持搜索栏的固定位置。然后将响应过滤器框设置为设置宽度网格项的子项。