Responsive React Sidebar Layout with Tailwind CSS

<script> import Header from './Header.svelte'; import Sidebar from './Sidebar.svelte'; import '../app.css'; </script> <div class="app"> <Header></Header> <div class="content wrapper"> <Sidebar/> <main class="main container"> <slot /> </main> </div> <main> <slot /> </main> <footer> <p>visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to learn SvelteKit</p> </footer> </div> <style> .app { display: flex; flex direction: column; min height: 100vh; } .content wrapper { display: flex; flex: 1; } Sidebar { position: fixed; top: 0; left: 0; width: 250px; /* Adjust this value as needed */ height: 100vh; z index: 10; } main { flex: 1; display: flex; flex direction: column; padding: 1rem; width: 100%; max width: 64rem; margin: 0 auto; box sizing: border box; } footer { display: flex; flex direction: column; justify content: center; align items: center; padding: 12px; } footer a { font weight: bold; } @media (min width: 480px) { footer { padding: 12px 0; } } </style> i want my content in the X position of the main outside of the div but it must parallel with the Sidebar