How I can Align more than 2 elements with same size in a "row" , I make dynamically rows with that "+" and the others rows are okay when I put "display: inline-flex; width: 100%" , but if the "first row" is with inline-flex its going broken , and when I clicked for more rows , it dont go down , it make them on the same row
 : 

1st line
[![at the moment ](https://i.stack.imgur.com/UDzgA.png)](https://i.stack.imgur.com/UDzgA.png)

after I generate some rows dynamically
[![after I generate dynamically rows](https://i.stack.imgur.com/Rpk0T.png)](https://i.stack.imgur.com/Rpk0T.png)

```
                <select class=" col-sm-5">
                    <option>  - Select Component - </option>
                </select>

                <input  class="col-sm-2 col-sm-offset-2" type="text" name="mytext[]">

                <div class="btn btn-default col-sm-1 col-sm-offset-2 add_field_button"><span class="glyphicon glyphicon-plus"></span></div>

```

jQuery

```
 $(document).ready(function () {
    var max_fields = 5; //maximum input boxes allowed
    var wrapper = $(".input_fields_wrap"); //Fields wrapper
    var add_button = $(".add_field_button"); //Add button ID
    var x = 1; //initlal text box count

    console.log(add_button);

    add_button.click(function (e) { //on add input button click
        e.preventDefault();
        if (x < max_fields) { //max input box allowed
            x++; //text box increment
            wrapper.append('<div style="display: inline-flex; width: 100%; " class="input_fields_wrap">\
                <select class=" col-md-5">\
                    <option>  - Select Component - </option>\
                </select>\
                <input class=" col-md-2 col-md-offset-2" type="text" name="mytext[]">\
                <button class="btn btn-default col-md-1 col-md-offset-2  remove_field"><span class="glyphicon glyphicon-trash"></span></button>\
        </div>'
                    );
        }
    });
    wrapper.on("click", ".remove_field", function (e) { //user click on remove glyphicon
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    });
});

```