Jquery 引导对齐-存在搜索栏问题

我需要创建一个引导设备响应页面。我在调整方面面临困难。在我的内容的标题部分，我需要放置标题，然后是搜索栏。我无法用动画引导我的搜索栏。有人能帮我吗。我已经在JSFIDLE中添加了我的程序

$（文档）.ready（函数（）{
$（“.searchInput”）。单击（函数（）{
$（“.input”）.toggleClass（“active”）.focus；
$（.input INTERNAL”）.toggleClass（“活动”）.focus；
$（this.toggleClass（“动画”）；
$（“.input INTERNAL”）.val（“”）；
});
$（“#清除”）。单击（函数（）{
$（'.input INTERNAR.active'）.val（''）；
});
});
.search\u包装器{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：100px；
高度：100px；
}
.searchInput{
高度：30px；
宽度：30px；
位置：相对位置；
}
.搜索框{
宽度：400px；
高度：100px；
位置：相对位置；
左缘：70%；
}
.输入{
位置：绝对位置；
顶部：20px；
右：147px；
框大小：边框框；
宽度：5px；
高度：40px；
填充：0 20px；
大纲：无；
字号：18px；
边界半径：50px；
颜色：黑色；
边框：3px实心#00859b；
过渡：所有0.3秒缓解；
左缘：40%；
}
.输入内部{
宽度：10px；
右：10px；
过渡：所有0.1秒轻松；
边界：0px；
大纲：无；
}
#清楚的{
位置：相对位置；
浮动：左；
宽度：20px；
高度：22px；
左：-10px；
顶部：12px；
边界半径：20px；
颜色：白色；
字体大小：粗体；
文本对齐：居中；
光标：指针；
过渡：所有0.5s缓解；
背景#f1f1；
}
#清除：悬停{
背景#00859b；
}
.搜索按钮{
位置：绝对位置；
宽度：50px；
高度：50px；
背景#00859b；
/*按钮背景*/
边界半径：50%；
右：45px；
顶部：10px；
光标：指针；
文本对齐：居中；
线高：80px；
字体大小：20px；
颜色：#00859b；
}
.input-inner.active{
边缘顶部：15px；
宽度：160px；
右：150px；
/*框大小：边框框*/
大纲：无；
}
.input.active{
宽度：240px；
右：100px；
高度：60px；
}
.btn.animate{
变换：旋转（-360度）；
/*右：250px*/
}

X
我不确定我是否理解它的外观。。你能为我们画吗？此外，对齐或动画有困难吗？问题在于搜索动画。设置动画后，对齐不正确。你能帮我做一个合适的搜索动画吗。然后我会试着把它放到引导程序中。我可以试一下，但你必须给我一个星点。你能创建一个片段或小提琴，告诉它应该是什么样子吗？谢谢。这是这个问题的小提琴点击按钮，文本框应该打开按钮，而不是在右边。同样在点击按钮之前，输入应该是隐藏的。非常感谢
文本框应该向下打开按钮
以哪种方式打开？我试图理解它应该是什么样子，但是，对不起，这个演示中有一团混乱。为什么所有奇怪的位置规则？例如：
.input
同时具有
位置：绝对
和
左边距：40%
，
#clear
具有
位置：相对
。此外，搜索按钮和输入本身彼此接近。你能把所有的乱七八糟的东西都清理干净以简化你的问题吗？谢谢