Display long span and i on the same line in a table row

I have the following issue, the icon normally should have enough space to go on the same line as the text:

But it doesn't and I'm not sure what css to use for it:

<tr>
  <td>22/06/2021 15:20:52</td>
  <td>
   <span> 
    The apple is red.
    <i class="fa fa-pencil padding-left-3" />
   </span>
  </td>

If the text is smaller, the icon is displayed nicely on the same line, but if the text is bigger then it just shifts to the next line.

What can be used for it?

html file:

<tr>
      <td>22/06/2021 15:20:52</td>
      <td>
       <span class="text"> 
        The apple is red.
        <i class="fa fa-pencil padding-left-3" />
       </span>
      </td>

css file:

.text{
  display: flex;
  align-items: center;
}

if you have enough room for the icon element then it will work fine. Make sure adjusting some padding and margin of other two elements beside.

Or you can simply apply the CSS.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

span{
  display: flex;
  align-items: center; /* optional */
  justify-content: center; /* optional */
}

<!-- end snippet -->

Though the element is inline element, The flex property will arrange its children in a row default. until explicitly you set the property

flex-direction: column;

Make sure when you do this it will change all the span element in your code. I suggest better use class selector or id selector in css. I hope this will help.