使用CSS，如何在调整大小后正确对齐并保持HTML元素的布局？

Question

在以下HTML / CSS代码段中，我试图将输出div对齐到输入字段下方，以使每当调整窗口大小时它们的宽度都相同。

现在，每当更改视口尺寸时，元素都将未对齐。

如何重构和改进CSS以获得所需的结果？

总体而言，我对于Web设计和开发还是相当陌生的，如果能得到详细的答案和建议，我将不胜感激。谢谢。

CSS / HTML

html {
  font-size: 62.5%;
}

body {
  background-color: #c0c0c0;
  font-size: 1.6rem;
}

.section {
  position: relative;
  margin-top: 2rem;
  text-align: center;
}

header {
  margin-bottom: -2rem;
}

.text-field {
  display: inline-block;
  background-color: #c0c0c2;
  border-top: .4rem solid;
  border-color: red;
  border-radius: .3rem;
  color: black;
  width: 50%;
  height: 4.2rem;
  text-align: left;
  text-decoration: none;
  font-size: 1.5rem;
  min-width: 17.5rem;
}

.btn {
  display: inline-block;
  background-color: blue;
  border-color: black;
  border-radius: 3px;
  border-style: dotted;
  color: white;
  padding: 14px 20px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
}

.output-div {
  position: absolute;
  display: block;
  font-size: 1.4rem;
  background-color: #fff;
  border-top: .5rem solid;
  border-right: .15rem solid;
  border-bottom: .15rem solid;
  border-left: .15rem solid;
  border-color: clack;
  border-radius: .3rem;
  margin: .5rem auto auto 6.5rem;
  min-width: 17.4rem;
  padding: .1em;
  width: 50%;
  height: auto;
  text-align: left;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
<br>
  

<!-- ✓ Oguntoye -->
<section class="section">
  <header>
    <h1>Header</h1>

  </header>
  <div class="user-interaction-area">
    <form id="form">
      <input class="text-field" type="text" placeholder="Input">
      <button class="btn" type="button">Run</button>
    </form>
  </div>

  <!-- output block-->
  <div class="output-div">
    <kbd class="input-output">Oy</kbd>
    <samp class="run-output">vey!</samp>
  </div>
</section>

Answer 1

我将您的示例代码放在了一个代码笔中。 https://codepen.io/melvinhicklin/pen/qyRwXB?editors=1100

据我所见，文本区域已经很好地保持了相同的宽度。

为了对齐它们，我在.output-div CSS类中添加了以下内容：

position:relative;
left:-71px;  
display:inline-block;