将输入框对齐其中一个css网格框

Question

我创建了一个css网格布局，将一个容器分成两半。一方可能是我的联系表格，另一方面是文字。现在，我已经开始在特定的<div>标记内添加一个bootstrap 3.x输入框，该标记包含左侧框的所有内容。由于某种原因，输入框显示在左侧框下方，而不是内部，以及减小框的垂直尺寸（应该一直跨越到图像的底部）。我用颜色编码框来表示问题：

我不知道如何解决这个问题，我希望在左侧框中包含整个表格。下面是我对这个特定容器的整个html和css。可能是什么问题？

HTML：

<section class="contact-container" id="contact">
    <div class="box contact-box-left"></div>
    <div class="input-group">
      <span class="input-group-addon" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Name" aria-describedby="basic-addon1">
    </div>
    <div class="box contact-box-right"></div>
  </section>

CSS：

/* ======= CONTACT ======= */

.contact-container {
  height: 50vh;
  background-color: #484747;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
}

.contact-box-left {
  background-color: pink;
  grid-column: 1;
  grid-row: 1 / 3;
}

.contact-box-right {
  background-color: green;
  grid-column: 2;
  grid-row: 1 / 3;
}

感谢您的帮助。

更新

为了方便起见，这里是jsfiddle：https://jsfiddle.net/7ajhcovg/

Answer 1

你的div.input-group完全在div.contact-box-left

之外

将.input-group移动到正确的div中。

<section class="contact-container" id="contact">
  <div class="box contact-box-left">
    <div class="input-group">
      <span class="input-group-addon" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Name" aria-describedby="basic-addon1">
    </div>
  </div>
  <div class="box contact-box-right"></div>
</section>

https://jsfiddle.net/7ajhcovg/1/