curriculum/challenges/english/blocks/workshop-tailwind-cta-component/6858f90c54647a48ddb8822d.md
At this point, the content, that is, the two div elements inside the outer div will be stacked on top of each other no matter the screen size.
That's because you have the flex-col class in the wrapping div element. To fix that, use the lg: prefix to add the class flex-row to the div.
This means on devices with larger screens, the flex direction will be row. To see that in effect again, adjust the browser to a larger width.
Your outer div element should have the utility class lg:flex-row.
const firstDiv = document.querySelectorAll("div")[0];
assert.isTrue(firstDiv.classList.contains("lg:flex-row"));
<!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 flex flex-col justify-around items-center">
<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>