Text behind image in Tailwind CSS

I want to do this:
But my image stay in right side of div, like that:


Soo I don’t know why it’s happening, that’s my code:

<div class="flex h-full justify-center items-center">
        <div>
            <h2 class="font-bold text-2xl text-gray-700">Page Not Found 🕵🏻‍♀️</h2>
            <h3 class="mt-3 text-gray-500">Oops! 😖 The requested URL was not found on this server.</h3>

             <div class="lg:grid justify-center mt-4">
          <BreezeButton
            class="
              inline-table
              w-full
              items-center
              bg-purple-600
              text-white text-xs
              font-bold
              hover:bg-purple-600 hover:shadow-purple
              mt-3
            "
            :href="route('dashboard')"
          >
            Back to home
          </BreezeButton>
        </div>
        </div>
        <div>
        <img src="../../Assets/Img/error404.svg" alt="" />
        </div>
      </div>

>Solution :

You flexed the wrapper div so it seems to have placed the items in a row by default. Use "flex-col" alongside that in order to place your items in a column.