Using Rails 7 and Taildwincss to put a picture and a card next each other - ruby-on-rails

Question

I'm trying to implement the following design, using Rails 7 with Tailwindcss:
I'm new to Taildwincss and I realize there are many ways to achieve this design. However I cannot fully replicate it. This is the code I'm using in my view:
<div class="grid gap-1 grid-cols-12 grid-rows-1">
<% #user.each do |user| %>
<% if user.photo? %>
<div class="p-5 col-span-2">
<div class="bg-white p-5 rounded-lg shadow-lg">
<%= image_tag "user_photo.png", width: 100 %>
</div>
</div>
<% else %>
<%# ToDo: %>
<%# image_tag user.photo, width: 100 %>
<% end %>
<div class="p-5 col-span-10">
<div class="bg-white p-5 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-2 text-gray-800"><%= user.name %></h2>
<p class="text-gray-700 text-right">Number of posts: <%= user.posts.count %></p>
</div>
</div>
<%end%>
</div>
And this is the result:
What could I change to get a bit closer to the wireframe?

Answer 1

Keep both the div containing both the image and card in flex and add item-center class to it.
Refer to this pseudo code
<div class="flex flex-row item-center">
<div class="bg-white rounded-lg shadow">Image</div>
<div class="bg-white rounded-lg shadow">
card
</div>
</div>
And here is the solution code
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-row items-center">
<div class="p-10">
<div class="rounded-lg bg-gray-200 p-10 shadow-lg">%></div>
</div>
<div class="p-5">
<div class="rounded-lg bg-gray-200 p-5 shadow-lg">
<h2 class="mb-2 text-2xl font-bold text-gray-800">Lily</h2>
<p class="ml-28 text-right text-gray-700">Number of posts: 2</p>
</div>
</div>
</div>