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?

>Solution :

To make the icon and text stay on the same line, we can use CSS to set the display property of the container element to "flex". Then, we can use the "align-items" property to center the icon vertically. Here’s some sample CSS code that you can try:

span {
  display: flex;
  align-items: center;
}

This code sets the display property of the span element to "flex", which makes the text and icon align horizontally. The "align-items" property centers the icon vertically within the span element.

I hope this helps! Let me know if you have any other questions.