arrange 1st half left and the rest right

Question

how to arrange the first half left and the second half right? (instead of the first goes left, second goes right, 3rd goes let, 4th goes right and so on)

Javascript:

  do {
    document.querySelector("main").innerHTML += 
      "<div class='timeTable'>" + 
      tempTime.format("DD-MM-YY | HH:mm") + 
      " - " + tempTime.add(30, "minutes").format("HH:mm") + 
      "</div>";
  } while (tempTime.format("HH:mm") != "19:00");

CSS:

* {
  box-sizing: border-box;
}
.timeTable {
  width: 50%;
  float: left;
  text-align: center;
}

PS: btw tempTime is a momentjs object (which is irrelevant to the question and just in case somebody is wondering)

Answer 1

found it:

main {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: repeat(9,auto);
        grid-auto-flow: column;
    }

repeat(9,auto) because of 18 boxes... divided by 2 is 9