Почему столы вывелись в одном блоке?

Всем привет.

11 задание moderm javascript. Все повторил пошагово. Но, столы все почему-то вывелись в одном блоке. Такое впечатление, что код игнорирует 'span'. Возможно, что-то упустил со внимания или допустил ошибку.

Подскажите, пожалуйста, в чем причина?

код

<h1>Restaurant manager<h1>
		<div id="tables"></div>
		<div id="results"></div>


<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type = "text/babel">

  var tables = document.getElementById('tables');

  for (var i = 1; i <=6; i++) {
  var item = document.createElement('span');
  item.appendChild(document.createTextNode('Table ' + i));
  tables.appendChild(item);
}

</script> 

 стили

#tables {
	background-color: orange;
	color: gray;
	margin: 3%;
	padding: 2%;
	width: 7%;
	border-radius: 10%;
	border-style: ridge;
}

СПАСИБО!