Output object properties in 2 columns

Output object properties in 2 columns

I'm struggling to output the object array in 2 columns. 
I need to output match2 in 2 seperate solumns.
Thank you.



JS:

$(function() {

  createQuizLayout();
  initQuiz();

  $('#reset').on('click', function() {
    $('#source li').draggable('destroy');
    $('#target li').droppable('destroy');
    createQuizLayout();
    initQuiz();
  });
});


function createQuizLayout() {

  var match1 = ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten"];

  var match2 = [
  {
  "drop":"Drop1",
  "definition": "This is the definition1"
  }, 
  {
  "drop":"Drop2",
  "definition": "This is the definition2"
  },
  {
  "drop":"Drop3",
  "definition": "This is the definition3"
  },
  {
  "drop":"Drop4",
  "definition": "This is the definition4"
  },
  {
  "drop":"Drop5",
  "definition": "This is the definition5"
  },
  {
  "drop":"Drop6",
  "definition": "This is the definition6"
  },
  {
  "drop":"Drop7",
  "definition": "This is the definition7"
  },
  {
  "drop":"Drop8",
  "definition": "This is the definition8"
  },
  {
  "drop":"Drop9",
  "definition": "This is the definition9"
  },
  {
  "drop":"Drop10",
  "definition": "This is the definition10"
  },
  
  
  ];


  var arrMatch1 = [];
  for (var i = 0; i < match1.length; i++) {
    arrMatch1.push('<li data-index="' + (i + 1) + '">' + match1[i] + '</li>');
  }

  var arrMatch2 = [];
  
  for (var i = 0; i < match2.length; i++) {
    arrMatch2.push('<li data-index="' + (i + 1) + '">' + match2[i] + '</li>');
  }
  //shuffle the arrays
  arrMatch1 = shuffle(arrMatch1);
  arrMatch2 = shuffle(arrMatch2);

  //insert them into DOM
  $('#source').html(arrMatch1.join(''));

  $('#target').html(arrMatch2.join(''));
}

function shuffle(v) {
  for (var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
  return v;
}

function initQuiz() {
  $('#source li').draggable({
    revert: true,
    revertDuration: 600,
    cursor: "all-scroll",

  });

  var totalScore = 0;
  $('#score').text(totalScore + ' correct answer');
  $('#target li').droppable({
    accept: function(draggable) {
      if (parseInt(draggable.data('index'), 10) ===
        parseInt($(this).data('index'), 10)) {
        return true;
      } else {
        return false;
      }
    },
    drop: function(event, ui) {
      var that = $(this);
      that.addClass("ui-state-highlight").html('Correct!');
      that.droppable('disable');
      ui.draggable.addClass('correct ui-state-highlight');
      (ui.draggable).draggable('disable');


      totalScore++;
      $('#score').text(totalScore + ' matching answer');


      if ($('li.correct').length == 10) {
        $("#dialog-complete").dialog({
          resizable: false,
          modal: true
        });
      }
    }
  });

}