I am working on a layout that includes a module containing various content. My goal is to have the progress bar, along with the labels "parts" and "projects," positioned underneath an image and expand to the full width of the module when the window size goes below 640px. However, my current solution does not seem to be effective. Any suggestions or ideas would be greatly appreciated. The title text should always remain next to the image regardless of screen size.
<script src="https://cdn.tailwindcss.com"></script>
<div class="rounded-2xl flex bg-[#3B4E6A]">
<div class="flex">
<div class="h-20 w-20 md:w-[160px] md:h-[160px] mr-1 md:mr-1 md:ml-0.5 flex-shrink-0 m-1">
<img src="https://placehold.co/120x120">
</div>
</div>
<div class="w-10/12">
<p class="mb-9 text-white font-semibold text-lg lg:text-2xl mt-1 ">some stuff here</p>
<div class="w-full bg-white rounded-full h-1 text-white"> Bar </div>
<div class="flex mt-2 align-bottom sm:align-baseline">
<div class="text-white mt-[12px]"><span class="font-medium"></span> <span>Item 1</span></div>
<div class="text-white ml-1 mt-[12px]"><span class="font-medium"></span> <span>Item 2</span>
</div>
</div>
</div>
</div>
</div>