make the the following div auto fill the gap after removing some div

I have a HTML5 page. I want to make the the following div auto fill the gap when removing the upper div dynamically using some button. Now when I remove the upper div, a big gap would generated. And the following div would not move up to auto fill the gap.

Before removing some selection div: enter image description here

After removing for some selection div: enter image description here

some gap appeared, which is very ugly

  <style>
    .field{ display: inline; }
    </style>   

<button class="button3" type="button" id="add_more">Add Discipline</button><p>  


    <script>
    $('#add_more').click(function(e){
        e.preventDefault();
        ++current_id;
        $("p").before("           <div class='field' id="+ current_id + ">         <select style=\"min-height:30px;min-width:100px;\" name=" + current_id +  ">\n" +
            "                        <option value=\"All Disciplines\" selected disabled hidden>--Select--</option>\n" +
            "                        <option value=\"All Disciplines\" name=\"discipline_name_all2\">All Disciplines</option>\n" +
            "                        {% for discipline in query_results %}\n" +
            "                        <option value=\"{{ discipline.name }}\" name=\"discipline_name2\">{{ discipline.name }}</option>\n" +
            "                        {% endfor %}\n" +
            "                    </select>&ensp;&nbsp;\n" +
            "                    <button class=\"button4\" type=\"button\" onclick=\"delete_button_clicked2(this.id)\" id="+ current_id + ">&#x2716;</button></div><br><br>");
    
        console.log(current_id);
    });
        
    function delete_button_clicked2(id) {      
        var sel = document.getElementById(id);    
        sel.remove();
    }


 </script>