Элемент DIV неожиданно отображается не там, где ожидалось

Я относительно новичок в HTML и CSS, и теперь у меня есть проблема, которую я даже не могу правильно назвать, поэтому я провел исследование, но не нашел ничего полезного.

html, body{
	height: 100%;
}
#divsContainer {
	width: 100%;
	height: 100%;
	background: lightgray;
}
#leftDiv {
	width: 60%;
	height: 100%;
	background: lightblue;
	display: inline-block;
}
#rightDiv {
	width: 30%;
	height: 100%;
	background: lightgreen;
	display: inline-block;
}
<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="testStyles.css">
		<script>
			function f(mess) {
				console.log(mess + " hello click");
			}
		</script>
	</head>
	<body>
		<div id="divsContainer">
		<div id="leftDiv">
			<p>This is left DIV</p>
		</div>
		<div id="rightDiv">
			<p>This is right DIV, users:</p>
			<ul>
				<li> User One </li>
				<li> User Two </li>
			</ul>
		</div>
		</div>
	</body>
</html>

Как видите, отображается левый элемент <div>, а не правый вверху страницы. Почему это происходит? Я не указывал ни float, ни position, ни padding, ни других пробелов. Остальные <div> отображаются как положено... Почему есть разница?

Поняв, почему он ведет себя таким образом, я надеюсь, что смогу понять это, но я также открыт для предложений, как это исправить.

EDIT Это связано с тем, что правое <div> больше, но почему одно зависит от другого? Я надеялся, что оба будут отображаться независимо


html css
person Michał Turczyn    schedule 07.04.2020    source источник
comment
Поскольку встроенное выравнивание блоков по умолчанию равно baseline.   -  person Paulie_D    schedule 07.04.2020
comment
@Paulie_D Как определяется исходный уровень? Как это исправить тогда? Я впервые встречаю такой термин   -  person Michał Turczyn    schedule 07.04.2020
comment
вертикальное выравнивание: сверху или переполнение: скрыто для элементов   -  person Temani Afif    schedule 07.04.2020
comment
добавлен еще один дубликат с полной информацией   -  person Temani Afif    schedule 07.04.2020