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

Question

目前我的网页看起来像这样

我希望它看起来像这样

我曾考虑将“电子邮件地址”和“ZIP”放在他们自己的跨度标签中，但我不确定最好的方法。

我的代码如下所示：

.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="[e-mail]" class="emailBox">
        </label>
        <label>ZIP <br>
            <input id="zip" name="zip" type="text" pattern="[0-9]*" placeholder="72712" class="zipBox">
        </label>
    </form>
</div>

标签： htmlcss