我正在开发一个有趣的小项目来学习JQuery，JQuery UI和JavaScript，但我实际上已经陷入了与CSS / HTML相关的问题，但我认为它与JQuery有关用户界面以及。
我想将下面的2个框彼此对齐，所以水平，但我不能使用flexbox，因为这会破坏可调整大小的功能，而display: inline-block;只是dosnt似乎可以工作。
[！[在此处输入图像说明] [1]] [1]
我通过使用flexbox实现了这一点，但正如所说它搞砸了可调整大小的功能，并在改变div / textarea的宽度时使它变得很时髦。
这是两个div的HTML。
<div class='drag resizable'>
<textarea class='resizable' type='text'></textarea>
<div class='buttonDiv'>
<i class='fa fa-paint-brush fa-lg color' aria-hidden='true'></i>
<br>
<i class='fa fa-trash fa-lg delete' aria-hidden='true'></i>
</div>
</div>
.buttonDiv {
background-color: #d9e4e8;
height: 5.5em;
border-top-right-radius: 10%;
border-bottom-right-radius: 10%;
display: inline-block;
}
.delete, .color{
margin: 15px 8px 10px 8px;
color: #364e59;
}
.drag {
width: 100px;
height: 100px;
background-color:transparent;
margin-bottom: 15px;
overflow: visible;
}
.drag textarea {
width: 100px;
height: 100px;
background-color: red;
font-size: 16px;
border: none;
}
.drag textarea:focus {
box-shadow: -5px 5px 20px rgba(0,0,0,0.5);
}
.drag textarea:active {
box-shadow: -5px 5px 20px rgba(0,0,0,0.5);
}
这是一个JSFiddle
https://jsfiddle.net/wzryne8o/
一个可爱的小伙伴帮助了我，这是解决问题的JSFiddle。