How to set width of span tag to be the same as its content?

January 12, 2023

I NEED to use display: flex in order to style this icon and text that are within a span tag. As you can see the width is way too long, I just want the width to be just as long as the width of image and text, that’s it.

NOTE: If text is longer I always want the width of span to adjust so it’s always the same as image and text combine. Can someone point me in the right direction, please?
Here’s my code:

   span {
 display: flex;
 align-items: center;
 background: #ddd;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<span>
  <i class="fa fa-arrow-right"></i>
   My Text
 </span>

>Solution :

The display: flex property is what is causing the element to behave like a block element. So you can either use flex-inline or just set the width of the block element to max-content.

.option1 {
  display: flex-inline;
  align-items: center;
  background: #ddd;
}

.option2 {
  display: flex;
  align-items: center;
  background: #ddd;
  width: max-content;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<span class="option1">
  <i class="fa fa-arrow-right"></i>
   My Text
 </span>
 
 <span class="option2">
  <i class="fa fa-arrow-right"></i>
   My Text
 </span>