这是我第一次与顺风和我想知道我如何可以调整我的div不同.我现在显示我的div在页面的中心在彼此之下，但我想显示2 div旁边的对方.
我该怎么做？

<template>
  <div class="grid grid-cols-1 pt-8 w-1/4">
    <div class="flex flex-col w-full p-6 items-center gap-8 rounded-md border-[1px] border-border_sm bg-zinc-800 text-white">
      <a :href="#">
        <img class="w-full rounded-md" src="https://aniketkotal.me/_nuxt/hanako.5b94cb52.jpg">
      </a>
      <div class="flex flex-col gap-4">
        <p class="text-lg">
          name
      </p>

        <p class="md:text-base">
          description
        </p>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  props: {
    project: {
      default: null,
      type: Object,
    }
  }
}
</script>

我的造型现在是什么样子my styling now
我希望我的造型看起来像how i want the styling