Text is doesn't fill the whole div, only a portion in the middle - html

Question

In short, my problem is this:
I'm using TailWind on Laravel, I can't get the text inside the border to fit the whole div he's in, and it's weirdly centered this way where the amount of characters per line is limited
I tried many approaches like changing and trying different values of padding and margin but I was unsuccessful, it only makes the div bigger but the text is still awfully centered and limited.
the code portion is as follows:
<div class="mx-4">
<x-card class="p-10">
<div
class="flex flex-col items-center justify-center text-center"
>
<img
class="w-48 mr-6 mb-6"
src="{{$album->logo? asset('storage/'.$album->logo) : asset('/images/noalbum.png')}}"
alt=""
/>
<h3 class="text-2xl mb-2">{{$album->title}}</h3>
<div class="text-xl font-bold mb-4">{{$album->artist}}</div>
<x-insidetags :tagscsv="$album->tags"/>
<div class=" w-full mb-6 mt-5">
<h3 class="text-3xl font-bold">
About the album
</h3>
</div>
<div>
<div class="flex">
<div class="px-20 text-lg border border-black text-left">
<h3 class="font-bold">Track List :</h3>
#foreach($tracks as $track)
<p>- {{$track}}</p>
#endforeach
</div>
<div class="text-lg space-y-6 ml-10">
<div class="text-left py-10">
{{$album->description}}
</div>
<a
href="{{$album->website}}"
target="_blank"
class=" bg-black text-laravel mt-16 py-2 px-10 rounded-xl hover:opacity-80"
><i class="fa-solid fa-globe"></i> Visit RateYourMusic page</a
>
</div>
</div>
</div>
</div>
For refrence I'm trying to create something like this, but only with the name of the tracks for the moment

Answer 1

I figured it out, added flex 1 1 0% and flex 4 1 0% to the two divs
<div class=" text-lg shadow-xl text-left flex-1 h-fit p-5">
<h3 class="font-bold">Track List :</h3>
#foreach($tracks as $track)
<p>- {{$track}}</p>
#endforeach
</div>
<div class="text-lg ml-10 flex-[4_1_0%]">
<div class="text-left py-10">
{{$album->description}}
</div>
<a
href="{{$album->website}}"
target="_blank"
class=" bg-black text-laravel mt-16 py-2 px-10 rounded-xl hover:opacity-80"
><i class="fa-solid fa-globe"></i> Visit RateYourMusic page</a
>
</div>