html / css divs不会自动调整屏幕

Question

我正在尝试让textarea盒子与照片对齐，无论他们是从桌面还是手机上看它，我都需要调整布局，这样盒子就不会相互分开。请帮忙吗？

HTML

<center>
    <h1>Custom Cut Sizing</h1>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
</center>

<div class="center">
    <div class="inline-div"><textarea style="resize: none;" cols="2" id="HeightCC" rows="2" class="leftbox"></textarea></div>
    <div class="inline-div"><img class="img2" src="https://foamtouch.com//wp-content/themes/jshop/cuboid.png"/></div>
        <div class="inline-div"><textarea style="resize: none;" cols="2" id="WidthCC" rows="2" class="rightbox"></textarea></div>
</div>
<center><textarea style="resize: none;" cols="2" id="LengthCC" rows="2"></textarea></center>
Estimated Costs (Including shipping):<p id="Estimated Costs"></p>
<button onclick="CalculateCosts()">Calculate Costs</button>

CSS

.center {
    margin: auto;
    padding: 0px 0px 0px 40px;
}

.inline-div {
    display:inline-block;
      height: 10px;
}

.leftbox {
  position: relative;
  top: 19%;
}

.rightbox {
    position: relative;
    top: 0%;
}

.img2{
    width: 550px;   
}

感谢。