HTML/CSS align 2 elements to 1 element e.g. 2 inputs with one label

Question

Here's a picture of what I wanna achieve :

How to align Input 2 with Input 1? It bugs my mind how difficult it seems to achieve something so simple. The whole thing needs to be web responsive, obviously. Also, I don't wanna use tables.

<form>
  <div class="field">
    <label>Label</label>
    <input id="Input 1" type="text" />
  </div>
  <div class="field">
    <input id="Input 2" type="text" />
  </div>
</form>

Answer 1

Float can do this easily. Make sure the bottom margin is big enough to push the second input:

 label { float:left; margin:5px 0 10px; } input { margin:2px 5px; }

 <form> <div class="field"> <label>Label</label> <input id="Input 1" type="text" > </div> <div class="field"> <input id="Input 2" type="text" > </div> </form>