Flexbox is a CSS layout model designed to help with the arrangement of items within a container.

Update the website to the following -

<html>
	<title>
		Visual Studio Code - Code Editor
	</title>
</html>
<body>
	<div style="display: flex;">
		<div>Visual Studio Code</div>
		<a href="/">Docs</span> 
		<a href="/">Updates</span> 
		<a href="/">Blog</span> 
		<a href="/">API</span> 
		<a href="/">Extensions</span> 
		<a href="/">FAQs</span>
		<a href="/">Learn</span>
	</div>
	<div>
		<input type="text" placeholder="Search Docs">
		<button>Download</button>
	</div>
	<br/>

	<div>
		<a href="/">Version 1.82</a> is now available! Read about the new features and fixes from July.
	</div>

	<br/>
</body>

Notice that the elements are positioned right next to each other even though Visual Studio code is inside a div

Justify content

Try experimenting with the justify-centent property. It tells how to space the elements across the main axis (x axis if flex-direction is row, y axis if flex-direction is column)

Screenshot 2024-08-03 at 7.20.00 PM.png

Align items

Try experimenting with the align-items property. It tells how to space the elements across the main axis (y axis if flex-direction is row, x axis if flex-direction is column)

Example 1

VSCode topbar

Screenshot 2026-01-16 at 6.41.13 PM.png

<html>
	<title>
		Visual Studio Code - Code Editor
	</title>
</html>
<body>
	<div style="display: flex; justify-content: space-between; margin: 20 300;">
        <div style="display: flex;">
            <div>Visual Studio Code</div>
            <a href="/">Docs</span> 
            <a href="/">Updates</span> 
            <a href="/">Blog</span> 
            <a href="/">API</span> 
            <a href="/">Extensions</span> 
            <a href="/">FAQs</span>
            <a href="/">Learn</span>
        </div>
	    <div style="display: flex;">
            <input type="text" placeholder="Search Docs">
            <button>Download</button>
	    </div>
    </div>

	<br/>
</body>

Example 2

https://elevenlabs.io/contact-sales

Screenshot 2026-01-16 at 5.17.40 PM.png

<html>

</html>
<body style="margin: 0; padding: 0;">
    <header>

    </header>
    <section>
    <div style="border-width: thick; height: 100vh; border-style: solid; display: flex; height: 100vw;">
        <div style="background: #1C1C1C; flex: 1; color: white;"> 
            Contact our sales team
        </div>
        <div style="background: white; flex: 1;">
            Contact sales form
        </div>
    </div>
</section>
    <footer>

    </footer>
</body>