CODEWITHSUNDEEP
cssreactjsflexboxtailwind-css
Millenial2020
Millenial2020

Reputation: 2931

How can I keep text on the same line as an icon?

  <div className={'bg-blue-700 flex flex-row p-5 items-center justify-between'} >
     <div>
        <IconButton className={'bg-blue-900 p-5 hover:bg-blue-900 '}>
            <Phone className={'text-white'} />
        </IconButton>
        <div className="text-white">John Doe</div>
      </div>
      <div>
          
      </div>
</div>

The problem its John Doe its going to the next row.

enter image description here

This is the look I want to achieve.

enter image description here

thank you in advance.

Upvotes: 2

Views: 4976

Answers (1)

Johannes
Johannes

Reputation: 67799

remove the div tag that wraps the icon and the name elements, so that those are direct children of the flex div. The way you have it now only that in-between wrapper div is a flex item, its children won't be affected by the flex setting of their grandparent element.

Upvotes: 2

Related Questions