JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.6/tailwind.min.css">
<div class="w-screen h-screen flex p-16">
	<main class="w-4/6 bg-blue-500 flex items-center justify-center">
		Main
	</main>
	<aside class="w-2/6 h-full flex flex-col gap-0 justify-between">
		<article class="w-full flex flex-col bg-gray-300 overflow-hidden">
			<header class="text-xl bg-green-500 flex justify-center py-3">
				List
			</header>
			<section class="min-h-0 flex-1 flex-grow overflow-auto">
				<ul class="p-4 bg-orange-500">
					<li>Number 1</li>
					<li>Number 2</li>
					<li>Number 3</li>
					<li>Number 4</li>
					<li>Number 5</li>
					<li>Number 6</li>
					<li>Number 7</li>
					<li>Number 8</li>
					<li>Number 9</li>
					
					<!-- Uncomment next lines to see overflow effect -->
			<li>Number 10</li>
					<li>Number 11</li>
					<li>Number 12</li>
					<li>Number 13</li>
					<li>Number 14</li>
					<li>Number 15</li>
					<li>Number 16</li>
					<li>Number 17</li>
					<li>Number 18</li>
					<li>Number 19</li>
					<li>Number 20</li> 
				</ul>
			</section>
			<section class="flex justify-center bg-red-600">
				<button>
				Add task +
			</button>
			</section>
		</article>
		
		<article class="bg-purple-500 flex justify-center">
			Footer component sidebar
		</article>
	</aside>
</div>