Html 标签粘贴在顶部并在形式上重叠

我正试着用它做一个表格。已描述问题，并添加了图像：

用户名（必填）
电子邮件id（必填）
添加（+）

---

如果您想知道我从何处获得此表单代码：

将每个输入和标签组放入各自的div中，如下所示：

      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" id="asd" type="text" name="sample1">
        <label class="mdl-textfield__label" id="asd" for="sample1" style="color: indigo;">Username (Required)</label>
     </div>

     <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
         <input class="mdl-textfield__input" type="text" name="sample2">
         <label class="mdl-textfield__label" for="sample2" style="color: indigo;">Email id (Required)</label>
     </div>

<div id="stacked" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  <input class="mdl-textfield__input" id="asd" type="text" name="sample1">
  <label class="mdl-textfield__label" id="asd" for="sample1" style="color: indigo;">Username (Required)</label>
</div>

<div id="stacked" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">        
  <input class="mdl-textfield__input" type="text" name="sample2">
  <label class="mdl-textfield__label" for="sample2" style="color: indigo;">Email id (Required)</label>
</div>

然后将其添加到CSS中：

#stacked {
  display: block;
}

---

没问题，伙计：）

<div id="stacked" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  <input class="mdl-textfield__input" id="asd" type="text" name="sample1">
  <label class="mdl-textfield__label" id="asd" for="sample1" style="color: indigo;">Username (Required)</label>
</div>

<div id="stacked" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">        
  <input class="mdl-textfield__input" type="text" name="sample2">
  <label class="mdl-textfield__label" for="sample2" style="color: indigo;">Email id (Required)</label>
</div>

#stacked {
  display: block;
}