Two columned <li> layout - html

Question

I think i might be missing something basic. Have been on it for few hours now and cannot make it work.
http://jsfiddle.net/x4bLtt7b/
<div class="customerInfo">
<form class="form-style">
<ul>
<li>
<label for="field1">field1</label>
<input type="text" name="field1" maxlength="100"> <span>field1 info</span>
</li>
<li>
<label for="field2">field2</label>
<input type="text" name="field2" maxlength="100"> <span>field2 info</span>
</li>
<li>
<label for="field3">field3</label>
<input type="text" name="field3" maxlength="100"> <span>field3 info</span>
</li>
<li>
<label for="field4">field4</label>
<input type="text" name="field4" maxlength="100"> <span>field4 info</span>
</li>
<li>
<label for="field5">field5</label>
<input type="text" name="field5" maxlength="100"> <span>field5 info</span>
</li>
</ul>
</form>
I just need the layout to be two columned, i.e. The field1/field2 pair should be on the same row (adjacent to each other). Same for field3/field4 pair and so on.
It seemed pretty simple to start with but i just couldn't get it to work yet. Any feedback is welcome.
Thanks

Answer 1

Regular CSS method:
Use this method if you need full browser support or else switch to flexbox.
Set a width for the list and display to inline-block
.form-style li {
border: 1px solid #dddddd;
border-radius: 3px;
display: inline-block;
margin-bottom: 30px;
margin-right: 5px;
padding: 9px;
width: 40%;
}
JSFiddle
Flexbox Method:
This is better but supported only by modern browsers.
.form-style ul {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
JSFiddle
Output

Answer 2

You can do it with this:
.form-style li {
display: inline-block;
width: 40%;
}
Adjust the width setting want you want.
FIDDLE: https://jsfiddle.net/lmgonzalves/x4bLtt7b/3/