Javascript 如何通过过渡将搜索栏从中心扩展到两侧

我试图通过点击搜索图标，使用css将隐藏的搜索栏从div的中心扩展到div的两侧。但它总是向左边或右边扩展。我需要同时向两边过渡。 我需要一个没有javascript或jquery的纯css解决方案。我尝试了动画、过渡、位置，但没有找到任何解决方案。我怎样才能解决这个问题

$（文档）.ready（函数（）{
$（'.search label'）。打开（“单击”，函数（e）{
$（“.form groups”）.addClass（“移动”）；
$（“#用于grp”）.addClass（“搜索打开”）；
$（“#表示grp”）.removeClass（“框可见”）；
$（“.close label”）.removeClass（“d-block”）；
});
});
.main
{
位置：相对位置；
宽度：50%；
背景色：aliceblue；
}
.组成小组{
宽度：0%；
过渡：宽度1s；
}
.向右拉
{
浮动：对；
}
.搜索标签
{
位置：绝对位置；
排名：0；
}
兄弟姐妹
{
清楚:对,；
}
#玻璃钢
{
宽度：90%；
显示：块；
左边距：25px；
高度：20px；
}
.框可见
{
可见性：隐藏；
}
移动
{
宽度：100%；
}
.搜索打开
{
边界：没有！重要；
边框底部：1px纯色灰色！重要；
边界半径：0！重要；
盒影：无！重要；
}
.关闭标签
{
位置：绝对位置；
右：0px；
}
d区
{
显示：无；
}
它没有风格，但也许这就是你想要的


$（文档）.ready（函数（）{
$（'i.fa-search'）。在（“单击”上，函数（e）{
$（'.holder'）.addClass（'open'）；
});
});
.main
{
位置：相对位置；
宽度：100%；
保证金：自动；
背景色：aliceblue；
}
输入{
宽度：0%；
显示：无；
}
i、 fa{
位置：绝对位置；
排名：0；
}
i、 搜索引擎{
左：0；
}
i、 faclose{
右：0；
显示：无；
}
.持有人{
位置：相对位置；
保证金：自动；
宽度：0%；
过渡：宽度1s；
}
.开{
宽度：50%；
}
.holder.open输入{
宽度：100%；
显示：块；
}
.holder.open i.fa-close{
显示：块；
}

您的意思是该行将位于
x
按钮之前和之后？？您已经在使用jQuery，但解决方案无法使用它？我正在使用jQuery进行绑定单击功能。没关系，我不知道；t在transition@sandwell中不必使用js或jquery。另外一个问题是，您忘记了表单组样式上的结束引号是。行将在X按钮之前和之后展开。之后我也会将X按钮移到末尾@לבנימ