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

user_3862830 0
Viewed 3564
  <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.

flexbox tailwind-css reactjs css
1 Answers

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.

user_56416690
Related