Big text on the right side pushes to the image on the left side

Question

I'm using TailwindCSS to create a simple view with an image and a text. On mobile (smaller than md) the image should be centered. The text should be below the image. For the other screens the image should be on the left side and the text should be on the right side, right next to the image but with a small margin.

Whenever the text does not exceed one line the CSS looks fine.

<link href="https://unpkg.com/tailwindcss@1.8.13/dist/tailwind.min.css" rel="stylesheet" />

<div class="md:flex">
  <div class="flex justify-center items-center">
    <img src="https://lastfm.freetls.fastly.net/i/u/270x205/92a6e1da897a4be19962d251717fabd7.jpg" class="rounded-full w-32 h-32 md:w-48 md:h-48 xl:w-64 xl:h-64" />
  </div>
  <div class="md:ml-20">
    <h3 class="text-xl leading-7 font-semibold">
      Header 1
    </h3>
    <p class="leading-6">
      Lorem ipsum dolor sit amet
    </p>
  </div>
</div>

But when it does, it pushes to the left side so the image shrinks down and the CSS is broken.

<link href="https://unpkg.com/tailwindcss@1.8.13/dist/tailwind.min.css" rel="stylesheet" />

<div class="md:flex">
  <div class="flex justify-center items-center">
    <img src="https://lastfm.freetls.fastly.net/i/u/270x205/92a6e1da897a4be19962d251717fabd7.jpg" class="rounded-full w-32 h-32 md:w-48 md:h-48 xl:w-64 xl:h-64" />
  </div>
  <div class="md:ml-20">
    <h3 class="text-xl leading-7 font-semibold">
      Header 1
    </h3>
    <p class="mt-2 leading-6">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
  </div>
</div>

I would expect the text just to add more lines of text instead of pushing to the left. Does someone know how to fix this?

Anis R. · Accepted Answer · 2020-10-11T13:58:46.000

Adding flex-shrink: 0 to your image's container should fix it.

Edit: As @Question3r pointed out in the comments, a better way would be to apply the class flex-shrink-0 to the image's container.

<link href="https://unpkg.com/tailwindcss@1.8.13/dist/tailwind.min.css" rel="stylesheet" />

<div class="md:flex">
  <div class="flex justify-center items-center" style="flex-shrink: 0">
    <img src="https://lastfm.freetls.fastly.net/i/u/270x205/92a6e1da897a4be19962d251717fabd7.jpg" class="rounded-full w-32 h-32 md:w-48 md:h-48 xl:w-64 xl:h-64" />
  </div>
  <div class="md:ml-20">
    <h3 class="text-xl leading-7 font-semibold">
      Header 1
    </h3>
    <p class="mt-2 leading-6">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
  </div>
</div>

ah yes, that fixed it :) Instead of doing `style="flex-shrink: 0"` I can add this to the class list `flex-shrink-0` — Question3r, Oct 11 '20 at 06:33
Cool, didn't know about this class name. I'll edit the answer. — Anis R., Oct 11 '20 at 13:55

Big text on the right side pushes to the image on the left side

1 Answers1