如何在 div 元素中放置内容？

我正在尝试修复我的 div 标签中的内容。我只放入其中的部分内容，但还有更多内容需要放入其中。我需要帮助。

注意我在做 Angular，但我只需要修复我的HTML 和 CSS。

我的 HTML

<div class="contentBox">

 <h1>Please Type In Your Address</h1>

<form (ngSubmit)="onSubmit()" [formGroup]="addressData">
   <input class="addressBar" type="text" placeholder="Address" maxlength="30" formControlName="address" autofocus>
</form>

<a routerLink=""><button class="button">Proceed</button></a><br><br>
<a routerLink="mainMenu"><button class="button">Cancel</button></a>

</div>

CSS

.button {
    padding: 20px 30px;
    font-size: 25px;
    background-color: lightblue;
    position: relative;
    top: 28em;
    left: 3em;
}

.button:hover {
   padding: 22px 32px;
}

.contentBox {
    display: inline-block;    
    background-color: lightgray;
}

.addressBar {
    padding: 20px;
    font-size: 30px;
    border: 3px black inset;
    text-align: center;
    position: relative;
    top: 3em;
 }

输出

您可以看到两个按钮不在 div 内（灰色）。如何展开 div 使其位于按钮后面，为所有内容提供背景？

谢谢！