---
id: 684d1942a1904a14a3709c6c
title: Step 20
challengeType: 0
dashedName: step-20
---

# --description--

The styling for your error message component is almost complete, but there is one thing left to fix. Since you set different font sizes for the paragraph and button text, the vertical alignment between those flex items is off. 

To position flex items along a container's cross-axis using Tailwind CSS, you can use the following pattern: `items-value`. `value` can be anything from `start`, `end`, `center`, `baseline` and more. 

Inside your opening `div` tag, use the correct utility class for setting the `align-items` property to `center`.

And with that last change, your error message component is complete!

# --hints--

Your opening `div` tag should have the `items-center` utility class.

```js
const divEl = document.querySelector("div");
assert.isTrue(divEl.classList.contains("items-center"));
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Error Message Component</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>  
    --fcc-editable-region--
    <div class="bg-red-100 border-2 border-red-300 rounded-md md:w-1/2 p-4 mt-4 md:mx-auto flex gap-4 justify-center">
    --fcc-editable-region--
      <p class="text-red-700 text-xl">
        <strong>Error!</strong> Something went wrong. Please try again.
      </p>
      <button aria-label="Dismiss" class="text-red-700 text-2xl">
        <span aria-hidden>&times;</span>
      </button>
    </div>
  </body>
</html>
```

# --solutions--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Error Message Component</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>  
    <div class="bg-red-100 border-2 border-red-300 rounded-md md:w-1/2 p-4 mt-4 md:mx-auto flex gap-4 justify-center items-center">
      <p class="text-red-700 text-xl">
        <strong>Error!</strong> Something went wrong. Please try again.
      </p>
      <button aria-label="Dismiss" class="text-red-700 text-2xl">
        <span aria-hidden>&times;</span>
      </button>
    </div>
  </body>
</html>
```
