how to display form with div correctly?

I have this part of form field enter image description here

When user click on the Add button will copy the above form field and user can add more in this field .

but when I add <div id="ownership"> above the code form it start to look like this enter image description here

I need to put id=ownership because I want to use it in my jQuery function

<div id="ownership">
    <div class="col-lg-12 mb-30 ">
        <label for="add_owner"><b><span style="color:#e60000;">*</span> Name</b></label><br>
            <input class="from-control" type="text" id="name" >
    </div>


    <div class="col-lg-6 mb-30" >
        <label for="add_owner"><b><span style="color:#e60000;">*</span> Phone number</b></label><br>
            <div class="input-group-prepend">
                <input class="from-control" type="text"  id="phone" >
            </div>
    </div>

    <div class="col-lg-6 mb-30" >
        <label for="add_owner"><b><span style="color:#e60000;">*</span> Emailn</b></label><br>
                <div class="input-group-prepend">
                    <input class="from-control" type="email" id="email">
                </div>
    </div>
</div>

<div id="owner"></div>
<br>
    <div class="col-md-12">
        <button type="button" class="btn btn-success w-30 add_info f-r">Add</button>      
</div>

<script>                                                  
    $(document).ready(function(){
        $(".add_info").click(function(){
        var newForm = $("#ownership").clone();
        $('input', newForm).val('');
         $('owner').append(newForm);
    });
    });
</script>

             

How do I fix the code in order to achieve the image in number 1 ?

Answer

try this

<div class="row">
    <div class="col-sm-6"> Text</div>
    <div class="col-sm-6"> Text</div>
</div>

you need to apply this format then design will be properly according your desirable.