如何在下方对齐输入字段？

Question

https://codepen.io/anon/pen/jgWdMW

我正在尝试对齐输入字段，以便它们都在同一点开始。自昨天以来，我尝试了多种方法，比我想象的要难。     

调查表

<p id="description"> Let us know how we can improve FFC</p>

<div class="labels">

  <div>
  <label for="name">* Name: </label>
  <input type="text" id="name" placeholder="Enter your name"          required>
         </div>


    <div class="one">     
  <label for="email">* Email: </label>
  <input type="text" id="email" placeholder="enter your mail">
    </div>

    <div>
  <label for="age">* Age: </label>
  <input type="number" id="email" placeholder="Enter your Age">
    </div>

    <div>
  <label for="Number">* Number: </label>
  <input type="text" id="Number" placeholder="Enter your Number">
    </div>
     </div>´

Answer 1

一个选项是定义标签的宽度，这意味着它们都在输入框旁边占用相同的空间。为此，您需要以下css：

label {
    display: inline-block;
    width: 100px;
}

由于数字输入和填充（至少对我来说是在firefox上），“年龄”（Age）框比其他框略大是一个小问题。您可以在输入框中设置宽度来解决此问题，例如

input {
    padding: 8px;
    margin: 12px;
    width: 200px;
}

Codepen