JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
	<header class="header">

	</header>
	<main>
		<div class="container">
			<div id="map">

			</div>
			<div id="results">
				<div class="extra-div">

				</div>
				<div class="result-items">
					<div id="item-1" class="result">
						<span>Item 1</span>
					</div>
					<div id="item-2" class="result">
						<span>Item 2</span>
					</div>
					<div id="item-3" class="result">
						<span>Item 3</span>
					</div>
					<div id="item-4" class="result">
						<span>Item 4</span>
					</div>
					<div id="item-5" class="result">
						<span>Item 5</span>
					</div>
					<div id="item-6" class="result">
						<span>Item 6</span>
					</div>
					<div id="item-7" class="result">
						<span>Item 7</span>
					</div>
					<div id="item-8" class="result">
						<span>Item 8</span>
					</div>
					<div id="item-9" class="result">
						<span>Item 9</span>
					</div>
					<div id="item-10" class="result">
						<span>Item 10</span>
					</div>
				</div>
			</div>
		</div>
	</main>
	<footer class="footer">

	</footer>
</body>
</html>

CSS

html{
	height: 100%;
}
body{
	margin: 0;
	padding: 0;
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
}
header{
	width: 100%;
	background-color: red;
	height: 50px;
	flex: 0 0 auto;
}
footer {
	width: 100%;
	background-color: purple;
	height: 100px;
	flex: 0 0 auto;
}
main {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
}
.container {
	width: 100%;
	max-width: 100%;
	padding: 0;
	margin: 0;
	display: flex;
	flex: 1;
}
#map {
	order: 2;
	flex-grow: 1;
	z-index: 5;
	min-height: 400px;
	position: relative;
	height: 100%;
	background-color: green;
}
#results {
	order: 1;
	min-width: 200px;
	max-width: 375px;
	padding: 0;
	z-index: 10;
	display: flex;
}
.result-items {
	overflow-y: auto;
	width: 100%;
}
.result {
	background-color: aqua;
	height: 75px;
	display: block;
	width: 100%;
	border-bottom: 1px solid #000;
}