Two columned <li> layout

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