javascript - Aligning dynamic inputs neatly -

i have been working on form can add, duplicate , remove row of inputs dynamically. aligning them hasn't been easy.

here illustration of 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 easiest approach this? appreciated!

jsfiddle

if want keep same code structure, add below class in css,

.input_line {   margin-left: 80px; } 

here updated fiddle. http://jsfiddle.net/23z60s1q/2/

let me know if works you.