Adding vertical labels to jquery.repeater field

I am using the jquery.repeater field and would like to add a label on top of the the field that gets repeated.

See below my minimum viable example:

$(document).ready(function() {
  'use strict';

  $('.repeater').repeater({
    defaultValues: {
      'textarea-input': 'foo',
      'text-input': 'bar',
      'select-input': 'B',
      'checkbox-input': ['A', 'B'],
      'radio-input': 'B'
    },
    show: function() {
      $(this).slideDown();
    },
    hide: function(deleteElement) {
      if (confirm('Are you sure you want to delete this element?')) {
        $(this).slideUp(deleteElement);
      }
    },
    ready: function(setIndexes) {

    }
  });

  window.outerRepeater = $('.outer-repeater').repeater({
    isFirstItemUndeletable: true,
    defaultValues: {
      'text-input': 'outer-default'
    },
    show: function() {
      console.log('outer show');
      $(this).slideDown();
    },
    hide: function(deleteElement) {
      console.log('outer delete');
      $(this).slideUp(deleteElement);
    },
    repeaters: [{
      isFirstItemUndeletable: true,
      selector: '.inner-repeater',
      defaultValues: {
        'inner-text-input': 'inner-default'
      },
      show: function() {
        console.log('inner show');
        $(this).slideDown();
      },
      hide: function(deleteElement) {
        console.log('inner delete');
        $(this).slideUp(deleteElement);
      }
    }]
  });
});

<form action="echo.php" class="repeater" enctype="multipart/form-data">
  <label>Product Name</label>
  <label>Price</label>
  <label>Date</label>
  <label>Description</label>
  <div data-repeater-list="group-a">
    <div data-repeater-item>
      <input name="untyped-input" value="A" />

      <input type="text" name="text-input" value="A" />

      <input type="date" name="date-input" />

      <textarea name="textarea-input">A</textarea>

    </div>
    <input data-repeater-create type="button" value="Add" />
  </div>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.js"></script>

I would like to have my final result look like the following:

As you can see, the label is directly over the repeated field.

Any suggestions what I am doing wrong?

I appreciate your replies!

Solution

You need to style the elements the same.

$(document).ready(function() {
  'use strict';

  $('.repeater').repeater({
    defaultValues: {
      'textarea-input': 'foo',
      'text-input': 'bar',
      'select-input': 'B',
      'checkbox-input': ['A', 'B'],
      'radio-input': 'B'
    },
    show: function() {
      $(this).slideDown();
    },
    hide: function(deleteElement) {
      if (confirm('Are you sure you want to delete this element?')) {
        $(this).slideUp(deleteElement);
      }
    },
    ready: function(setIndexes) {

    }
  });

  window.outerRepeater = $('.outer-repeater').repeater({
    isFirstItemUndeletable: true,
    defaultValues: {
      'text-input': 'outer-default'
    },
    show: function() {
      console.log('outer show');
      $(this).slideDown();
    },
    hide: function(deleteElement) {
      console.log('outer delete');
      $(this).slideUp(deleteElement);
    },
    repeaters: [{
      isFirstItemUndeletable: true,
      selector: '.inner-repeater',
      defaultValues: {
        'inner-text-input': 'inner-default'
      },
      show: function() {
        console.log('inner show');
        $(this).slideDown();
      },
      hide: function(deleteElement) {
        console.log('inner delete');
        $(this).slideUp(deleteElement);
      }
    }]
  });
});

label,input,textarea{display:inline-block; width:150px;}
label{border:solid 2px rgba(0,0,0,0);}

<form action="echo.php" class="repeater" enctype="multipart/form-data">
  <label>Product Name</label>
  <label>Price</label>
  <label>Date</label>
  <label>Description</label>
  <div data-repeater-list="group-a">
    <div data-repeater-item>
      <input name="untyped-input" value="A" />

      <input type="text" name="text-input" value="A" />

      <input type="date" name="date-input" />

      <textarea name="textarea-input">A</textarea>

    </div>
    <input data-repeater-create type="button" value="Add" />
  </div>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.js"></script>