Javascript 动态地将按钮的高度设置为文本区域的高度

这是一件小事，但我找不到任何关于如何着手做这件事的东西

在下图中，有一个

textarea

，带有一个样式化（且已禁用）的

按钮

，纯粹出于美观目的：

但是，当您调整

文本区域的大小时，会发生以下情况：


这看起来不太好

我想将
文本区域的动态高度
与
按钮的高度
绑定在一起，以便它们在任何高度都保持在一起，但我找不到类似的东西

如何将一个元素样式与另一个元素样式相关联

注意-PHP比jQuery/javascript更自信，但显然不会拒绝这些语言的答案。
使用以下方法禁用textarea的大小调整：



或者通过做必要的修改来使用这把小提琴（我没有创造它）



最简单的方法是将textarea包装在另一个元素中，并将父元素的
display
属性设置为
flex
，如下所示：


div{
显示器：flex；
}
文本区{
调整大小：垂直；
}

文本
Flexbox可以做到这一点


div{
显示：内联flex；
边缘：1米；
}
文本区，
波顿{
弹性：1；
}

我的尺码将与钮扣相匹配
点击
这里有一种使用HTML和CSS的方法，不需要javascript或php代码：

<div class="container">
<textarea rows="4" cols="50"></textarea>
<button type="button">Click Me!</button>
</div>

.container{
  overflow: auto;
  position: relative;
}

textarea, button{
  float: left;
}

button{
  position:absolute;
  height:100%;
  width:150px;
}


点击我！
.集装箱{
溢出：自动；
位置：相对位置；
}
文本区，按钮{
浮动：左；
}
钮扣{
位置：绝对位置；
身高：100%；
宽度：150px；
}

下面是一个JSFIDLE：

编辑：

您可以删除最小高度，没有它也可以（我从上面的代码中删除了它，并更新了JSFIDLE）。我也不会使用flex，因为它会对早期版本的浏览器施加限制。IE9不支持它，我相信，这里有更多的细节：
将两者都放在一个外部容器中，并使其浮动（对于textarea）和高度等于两者。容器高度将自动调整。我不是一个设计师，但我会这样做你在使用引导吗？太棒了。很乐意提供帮助。这是很多不必要的JS，因为CSS很容易实现。另外，JS.com正在调整元素的大小，元素上有很多闪烁。我之前不知道CSS解决方案。现在我是了。看，这就是我所拥有的，但它打破了我无法修复的风格。答案很好，而且在大多数情况下都是正确的，所以我会投赞成票，但勾选的那个将保持勾选状态，因为它是针对我的——只是给其他人的一个提示。
<div class="container">
<textarea rows="4" cols="50"></textarea>
<button type="button">Click Me!</button>
</div>

.container{
  overflow: auto;
  position: relative;
}

textarea, button{
  float: left;
}

button{
  position:absolute;
  height:100%;
  width:150px;
}