curriculum/challenges/english/blocks/workshop-tailwind-cta-component/6858ef974c8ad5dcd7abb9f1.md
The content inside the div can be better spaced and arranged. For the rest of the spacing and that arrangement, you need to use flexbox.
Add the class flex to the div so the two child div elements sit side by side.
Also, add justify-around so the space around and between the content is evenly distributed, and items-center so the entire content is finally centered in the div.
Your outer div element should have the utility class flex.
const firstDiv = document.querySelectorAll("div")[0];
assert.isTrue(firstDiv.classList.contains("flex"));
Your outer div element should have the utility class justify-around.
const firstDiv = document.querySelectorAll("div")[0];
assert.isTrue(firstDiv.classList.contains("justify-around"));
Your outer div element should have the utility class items-center.
const firstDiv = document.querySelectorAll("div")[0];
assert.isTrue(firstDiv.classList.contains("items-center"));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CTA component</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
--fcc-editable-region--
<div class="bg-indigo-600 text-white mt-8 p-4 md:w-1/2 mx-auto">
<div>
<span>Soundflow</span>
<h1>Discover New Music</h1>
<p>Stream your favorite tracks and discover new artists.</p>
</div>
<div>
<a href="#">Learn more</a>
<a href="#">Start listening</a>
</div>
</div>
--fcc-editable-region--
</body>
</html>