Aligning dynamic inputs

I recently worked on a form that can add, duplicate and remove a row of inputs dynamically. But aligning them wasn't easy.

Here is an illustration of the problem.

HTML:

<form action="javascript:void(0);" method="POST" autocomplete="off">
    <button id="add">Add Field</button>
    <div class='input_line'>
        <input type="text" name="input_0" placeholder="Input1"><input type="text" name="input_0" placeholder="Input2"><input type="text" name="input_0" placeholder="Input3"><input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br>
    </div>
</form>

      

        
        
        
      

    

CSS

#add {
    float: left;
}

      

        
        
        
      

    

JQuery

jQuery(document).ready(function () {
    'use strict';
    var input = 1,
        blank_line = $('.input_line').clone();

    $('#add').click(function () {
        $('form').append(blank_line.clone());
        $('.input_line').last().before($(this));
    });

    $('form').on('click', '.remove', function () {
        $(this).parent().remove();
        $('.input_line').last().before($('#add'));
        input = input - 1;
    });

    $('form').on('click', '.duplicate', function () {
       $(this).parent().after($(this).parent().clone());
       $('.input_line').last().before($('#add'));
       input = input + 1;
    });
});

      

        
        
        
      

    

What would be the simplest approach to this? Any help would be appreciated!

JSFiddle