So I have this element is supposed to expand on hover to show the label of the icon. The problem is even when the element is set to 0 width and height there is still a whitespace after the icon when it is hidden. How do I prevent this?

My code:

<div className="bg-stone-700 bg-opacity-70 rounded flex align-middle justify-center p-2 gap-1 hover:bg-opacity-100 transition-all group cursor-default overflow-hidden w-8 hover:w-20 box-border">
  <FaHtml5 size={16} className="size-4" color="#ef4444" />
  <span className="text-xs text-white w-0 group-hover:w-full overflow-hidden transition-all">
    HTML5
  </span>
</div>