How to build text fields and balance them?

Question

I have 12 text fields as shown below. I want to align them so that the same number of boxes are always displayed above and below. For example, it can be 2 lines of 6 or on a different screen width, it can be 3 rows of 4 boxes. I also need line spacing to make them look better. Finally, they should all line up, I noticed that my bottom line seems to have extra space, so the top and bottom lines are not aligned perfectly.

What is the best way to do this?

<input name="Neighborhood1" type="text" id="Neighborhood1">
<input name="Neighborhood2" type="text" id="Neighborhood2">
<input name="Neighborhood3" type="text" id="Neighborhood3">
<input name="Neighborhood4" type="text" id="Neighborhood4">
<input name="Neighborhood5" type="text" id="Neighborhood5">
<input name="Neighborhood6" type="text" id="Neighborhood6">
<input name="Neighborhood7" type="text" id="Neighborhood7">
<input name="Neighborhood8" type="text" id="Neighborhood8">
<input name="Neighborhood9" type="text" id="Neighborhood9">
<input name="Neighborhood10" type="text" id="Neighborhood10">
<input name="Neighborhood11" type="text" id="Neighborhood11">
<input name="Neighborhood12" type="text" id="Neighborhood12">

Answer 1

. , , - 12 . Susy , -. , , .

@media only screen and (max-width: 319px) {
input {
    width: 100%;
    float: left;
    margin-left: 0;
    margin-right: 0;
  }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
input {
    width: 49.15254%;
    float: left;
    margin-right: 1.69492%;
}
input:nth-child(2n) {
    float: right;
    margin-right: 0;
  }
}

JSFiddle