cssグリッドボックスの1つに入力ボックスを配置する

Question

コンテナを2つのハーフに分割するCSSグリッドレイアウトを作成しました。おそらく私のコンタクトフォームの片面、テキストのもう片面。今、左側のボックスのすべての内容を保持する特定の<div>タグ内にブートストラップ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; 
} 

感謝。

UPDATE：

は物事を容易にするために、ここにjsfiddleは次のとおりです。https://jsfiddle.net/7ajhcovg/

Answer 1

あなたdiv.inputグループは、ジャスト完全div.contactボックス左

の外にあります.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/