如何将标签文本与输入框的左上方对齐？

Question

当前我的网页是这样的

我希望它看起来像这样

我曾考虑过将“电子邮件地址”和“邮政编码”放在自己的span标签内，但是我不确定最好的方法。

我的代码如下：

.emailBox {
  padding-left: 13px;
  font-family: Rubik; 
  z-index: 1;
  top: 300px;
  width: 317px;
  height: 50px;
  border-radius: 2px;
  background-color: #f5f6f7;
  border: none;
}
.zipBox {
  margin-left: 10px;
  padding-left: 13px;
  font-family: Rubik; 
  z-index: 1;
  top: 300px;
  width: 90px;
  height: 50px;
  border-radius: 2px;
  background-color: #f5f6f7;
  border: none;
}

<div>
    <form action="https://hooks.zapier.com/hooks/catch/1681335/pq0txq/" method="POST">
        <label>Email Address <br>
            <input type="email" name="email" placeholder="email@shinesolar.com" class="emailBox">
        </label>
        <label>ZIP <br>
            <input id="zip" name="zip" type="text" pattern="[0-9]*" placeholder="72712" class="zipBox">
        </label>
    </form>
</div>