Confused about tailwindcss's flexgrid

I'm trying to learn about tailwindcss's grid, but rather unsurprisingly I ran into an issue again. What I want is simple.

This is a website configured in Vue.js, and what I want is to move that image to the center of the right half of the screen. Now, after perusing the tailwindcss docs and finding nothing of this sort, I asked AI (which gave code that either shrunk the image and did nothing or severely affected the rest of the structure as a result.

I want the rest of the website to remain the same. Oh, I just want to quickly mention that I can't move the text section (the section to the left of the image) either. I can't control its width, height, etc. It's just frustrating for me not knowing how to control the UI.

import Navbar from './components/Navbar.vue';   
</script>
<template>
<div class="flex flex-col h-screen">
<Navbar/>
<section class="flex-1 flex items-center justify-center px-10 relative max-w-4xl mx-auto w-full">
<div class="flex">
<!-- Left: Text Column -->
<div class="w-1/2 flex flex-col justify-start items-center">
<div class="mt-1">
<h1 class="text-5xl font-bold">Name</h1>
<div class="my-6 w-1/4 h-2 bg-purple-500"></div>
<p class="text-lg text-gray-700">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</p>
</div>
</div>
<!-- Right: Image Block -->
<div class="w-1/2 flex flex-col justify-start items-end">
<img src="../src/assets/9293987.jpg" alt="Profile" class="w-full object-cover rounded-xl border-2 border-gray-700"/>
</div>
</div>
<!-- Progress Button (bottom center) -->
<button class="absolute bottom-6
left-1/2 -translate-x-1/2 px-6 py-2
border border-gray-600 rounded-full
text-sm text-gray-800 hover:bg-gray-100
transition"> progress...</button>
</section>
</div>
</template>
<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>