Flex column layout on smaller screen, trying to get text to stay next to image as it is on desktop

Question

Have this layout for a module. I need to get the "title stuff here" text to stay next to the image on small screens but the progress bar and parts/projects text need to go underneath how it is now. The "title stuff here" wraps since it's part of the parent div but cant figure out how to keep it to the right of the image. Any ideas? Code below.

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-col rounded-2xl bg-[#3B4E6A] md:flex-row">
  <div class="m-1 h-28 w-28 md:h-[100px] md:w-[100px] lg:h-[160px] lg:w-[160px]">
    <img src="https://placehold.co/160x160" />

  </div>
  <div class="w-full md:w-10/12">
    <p class="text-md mt-1 font-semibold text-white lg:text-2x">Title stuff here</p>
    <!--this part should go below the image and expand to the full width of the module - the bar ,the and the parts and projects text-->
    <div class="flex flex-wrap f">
      <div class="progressBar dark:bg-gray-progressBar h-[10px] w-full rounded-full bg-white sm:mb-3">
        <!-- Progress bar content here -->
      </div>
      <div class="mt-3 flex w-full text-white">
        <div class="flex items-center md:w-auto">
          <span class="font-medium">1</span>
          <span class="ml-1">Parts</span>
        </div>
        <div class="flex items-center md:w-auto">
          <span class="font-medium">1</span>
          <span class="ml-1">Projects</span>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

You could consider floating the image left, and having the progress bar clear the float:

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

<div class="rounded-2xl bg-[#3B4E6A] md:flex">
  <div class="m-1 h-28 w-28 md:h-[100px] md:w-[100px] lg:h-[160px] lg:w-[160px] float-left">
    <img src="https://placehold.co/160x160" />
  </div>
  <div class="w-full md:w-10/12">
    <p class="text-md mt-1 font-semibold text-white lg:text-2x">Title stuff here</p>
    <!--this part should go below the image and expand to the full width of the module - the bar ,the and the parts and projects text-->
    <div class="flex flex-wrap clear-both">
      <div class="progressBar dark:bg-gray-progressBar h-[10px] w-full rounded-full bg-white sm:mb-3">
        <!-- Progress bar content here -->
      </div>
      <div class="mt-3 flex w-full text-white">
        <div class="flex items-center md:w-auto">
          <span class="font-medium">1</span>
          <span class="ml-1">Parts</span>
        </div>
        <div class="flex items-center md:w-auto">
          <span class="font-medium">1</span>
          <span class="ml-1">Projects</span>
        </div>
      </div>
    </div>
  </div>
</div>

You could also consider a grid layout. On small screens, apply display: contents on the element wrapping the Title and other content to make it as though it does not exist so that its inner elements can participate in the grid layout.

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

<div class="grid grid-cols-[max-content_1fr] rounded-2xl bg-[#3B4E6A] md:flex">
  <div class="m-1 h-28 w-28 md:h-[100px] md:w-[100px] lg:h-[160px] lg:w-[160px]">
    <img src="https://placehold.co/160x160" />
  </div>
  <div class="contents md:block md:w-10/12">
    <p class="text-md mt-1 font-semibold text-white lg:text-2x">Title stuff here</p>
    <!--this part should go below the image and expand to the full width of the module - the bar ,the and the parts and projects text-->
    <div class="flex flex-wrap col-span-full">
      <div class="progressBar dark:bg-gray-progressBar h-[10px] w-full rounded-full bg-white sm:mb-3">
        <!-- Progress bar content here -->
      </div>
      <div class="mt-3 flex w-full text-white">
        <div class="flex items-center md:w-auto">
          <span class="font-medium">1</span>
          <span class="ml-1">Parts</span>
        </div>
        <div class="flex items-center md:w-auto">
          <span class="font-medium">1</span>
          <span class="ml-1">Projects</span>
        </div>
      </div>
    </div>
  </div>
</div>