Javascript &引用；转换；文本框到带有滑动动画的文本区域

我正在尝试创建一个带有展开箭头的文本框，当单击该箭头时，将删除该文本框，并用一个更大的文本区域替换它，并使用jQuery制作一个漂亮的滑动动画。问题是，右侧相对定位的箭头和左侧的标签随着文本框的展开而向下滑动。我一直在尝试各种组合的

垂直对齐

，

显示

，

填充

和其他CSS属性，试图将它们保持在顶部，但都没有效果。有趣的是，该设计在Firefox中工作，标签和箭头保持在我想要的位置，但不在Chrome或IE中。您可以看到该设计。

您需要设置

垂直对齐：顶部到文本区域，在制作动画时不要更改它。我在Chrome调试器中试用过，效果很好

另外，为什么要用
替换
？为什么不从一开始就给它一个小高度

UPD.分配
垂直对齐：顶部
到
元素，以便将标签和箭头交换到textarea时保持在同一位置。如果需要，可以使用
top
或
margin top
将它们向下移动一点

//我手头没有IE，所以目前无法帮你。。。建议更改后IE中发生了什么？
您需要设置
垂直对齐：顶部到文本区域，在制作动画时不要更改它。我在Chrome调试器中试用过，效果很好

另外，为什么要用
替换
？为什么不从一开始就给它一个小高度

UPD.分配
垂直对齐：顶部
到
元素，以便将标签和箭头交换到textarea时保持在同一位置。如果需要，可以使用
top
或
margin top
将它们向下移动一点

//我手头没有IE，所以目前无法帮你。。。在建议的更改之后，IE中发生了什么？
这种方法很有效，但仍然显得有些奇怪。文本框相对于标签和箭头显示得太低。至于我为什么不首先使用文本框，这是因为文本框处理文本溢出和在标签和箭头上粘贴新行的方式带有一点
position:relative
magic。谢谢你的帮助。这种方法很有效，但看起来还是有点奇怪。文本框相对于标签和箭头显示得太低。至于我为什么不首先使用文本框，这是因为文本框处理文本溢出和在标签和箭头上粘贴新行的方式带有一点
position:relative
magic。谢谢你的帮助。