Asappi Posts - Answer Overflow

Asappi

•Created by Asappi on 4/27/2024 in #front-end

Can't figure out how to wrap text under an image

Basically, what I want to achieve is this (1st image): https://prnt.sc/EO_CIn76U9UT The closest I can get to my desired result is with flex - which results in this (2nd image): https://prnt.sc/kyvUnM2vIww4 Source to my closest result:

<div className="flex">
  <Avatar className="h-6 w-6">
    <AvatarImage src="https://github.com/shadcn.png"/>
    <AvatarFallback>ABC</AvatarFallback>
  </Avatar>
  <span className="text-sm"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, laudantium? Excepturi iure corrupti adipisci debitis, laborum ad quae magni? Lorem ipsum dolor sit amet.
  </span>
</div>

<div className="flex">
  <Avatar className="h-6 w-6">
    <AvatarImage src="https://github.com/shadcn.png"/>
    <AvatarFallback>ABC</AvatarFallback>
  </Avatar>
  <span className="text-sm"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, laudantium? Excepturi iure corrupti adipisci debitis, laborum ad quae magni? Lorem ipsum dolor sit amet.
  </span>
</div>

Any help is appreciated! :)

7 replies

Gaming

Programming