Two line layout <li>

Question

I think that I could skip something basic. Were on it for several hours 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 columns, i.e. the field1 / field2 pair must be on the same line (next to each other). The same goes for field3 / field4, etc.

It seemed pretty simple to get started, but I just couldn't get it to work. Any feedback is appreciated.

thank

Answer 1

The usual CSS method:

Use this method if you need full browser support, or switch to flexbox. Set the width of the list and show its 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:

, .

.form-style ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

JSFiddle

Answer 2

:

.form-style li {
    display: inline-block;
    width: 40%;
}

.

FIDDLE: https://jsfiddle.net/lmgonzalves/x4bLtt7b/3/