How2 show multiple fields in a list-item next to eachother and set width af each field

Questions
1

Hi,

What is the best approach to create a form with 2 (or more) fields next to eachother. And also specify the width of each field?

The code below creates partly what i want. A list-item with 2 “rows”. Each row has 2 fields next to eachother. It looks like the width of the fields is calculated by 100% / number of fields. Is there a way I can override that?

 <div class="page-content">
        <div class="block list no-hairlines no-hairlines-between">
            <ul>
                <li>
                        <div class="item-content item-inner nolink">
                            <div class="item-input-wrap item-input item-input-with-value">
                                <div class="item-title item-floating-label">
                                    <span data-localize="field1">Field 1</span>
                                </div>
                                <input class="js-input input-with-value" id="field1" type="text" value="field 1" data-fieldname="field1" data-valuetype="text">
                            </div>
                            <div class="item-input-wrap item-input item-input-with-value">
                                <div class="item-title item-floating-label">
                                    <span data-localize="field2">Field 2</span>
                                </div>
                                <input class="js-input input-with-value" id="field2" type="text" value="field 2" data-fieldname="field2" data-valuetype="text">
                            </div>
                        </div>
                        <div class="item-content item-inner nolink">
                            <div class="item-input-wrap item-input item-input-with-value">
                                <div class="item-title item-floating-label">
                                    <span data-localize="field1">Field 3</span>
                                </div>
                                <input class="js-input input-with-value" id="field3" type="text" value="field 3" data-fieldname="field3" data-valuetype="text">
                            </div>
                            <div class="item-input-wrap item-input item-input-with-value">
                                <div class="item-title item-floating-label">
                                    <span data-localize="field2">Field 4</span>
                                </div>
                                <input class="js-input input-with-value" id="field4" type="text" value="field 4" data-fieldname="field4" data-valuetype="text">
                            </div>
                        </div>
                </li>
            </ul>
        </div>
        <div class="row button-row">
            <div class="col-50">
                <a class="button button-big" id="cancel">
                    <span data-localize="cancel">Cancel</span>
                </a>
            </div>
            <div class="col-50">
                <a class="button button-big active" id="done">
                    <span data-localize="save">Done</span>
                </a>
            </div>
        </div>
    </div>

I hope someone can point me in the right direction.

Thanks in advance!
Johan Beumer