change the date location in tailwind CSS

i want to change the location (design problem) in my datetime data here's the design

<div class="my-6 ml-3 text-lg leading-6">
     <span class="text-black underline justify-start">{{ __('Writter') }}</span>:
       {{ $post->user->name }}
     <span class="justify-end mx-52">
    <a class="text-purple-700">{{ $post->created_at->format('d/m/Y') }}</a>
     </span>
</div>

You could consider using a flex layout:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-html -->

<script src="https://cdn.tailwindcss.com"></script>

<div class="my-6 ml-3 text-lg leading-6 flex">
  <span>
    <span class="text-black underline">{{ __('Writter') }}</span>:
    {{ $post->user->name }}
  </span>
  <span class="ml-auto">
    <a class="text-purple-700">{{ $post->created_at->format('d/m/Y') }}</a>
  </span>
</div>

<div class="my-6 ml-3 text-lg leading-6 flex">
  <span class="mr-auto">
    <span class="text-black underline">{{ __('Writter') }}</span>:
    {{ $post->user->name }}
  </span>
  <span>
    <a class="text-purple-700">{{ $post->created_at->format('d/m/Y') }}</a>
  </span>
</div>

<div class="my-6 ml-3 text-lg leading-6 flex justify-between">
  <span>
    <span class="text-black underline">{{ __('Writter') }}</span>:
    {{ $post->user->name }}
  </span>
  <span>
    <a class="text-purple-700">{{ $post->created_at->format('d/m/Y') }}</a>
  </span>
</div>

<!-- end snippet -->

Or you could float the <span> with the date to the right:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-html -->

<script src="https://cdn.tailwindcss.com"></script>

<div class="my-6 ml-3 text-lg leading-6 flow-root">
  <span class="text-black underline justify-start">{{ __('Writter') }}</span>:
  {{ $post->user->name }}
  <span class="justify-end float-right">
    <a class="text-purple-700">{{ $post->created_at->format('d/m/Y') }}</a>
  </span>
</div>

<!-- end snippet -->

justify-start and justify-end are classes that only work on flex and grid containers, not their children. You should make the parent div a flexbox container and put justify-between (so that the left child goes all the way to the left, and the right child goes all the way to the right).

You should also remove the post body from the header, and wrap them both in a parent div.

(Ignore the CSS in the below snippet, I've just replicated the relevant Tailwind classes.)

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.flex {
display: flex;
}

.justify-between {
justify-content: space-between;
}

.w-full {
width: 100%;
}

.w-fit {
width: fit-content;
}

<!-- language: lang-html -->

<div class="w-fit">
<div class="flex justify-between w-full"/>
  <span>Post Title</span>
  <span>05/06/2023</span>
</div>
<div>Placeholder lorem ipsum dolor sit amet...</div>
</div>

<!-- end snippet -->