fix(styling): empty warning should separate icon & text

[ghiscoding]

• the previous code was using the :before pseudo and we were able to add text to the same div but that is no longer feasible with the new pure CSS icons since the div is the icon and nothing else, so the text has to be in a separate div
• also use flex to align the text and icon in the middle

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 99.7%. Comparing base (69f7bfc) to head (9d3c664).

Additional details and impacted files

@@          Coverage Diff           @@
##            next   #1491    +/-   ##
======================================
  Coverage   99.7%   99.7%            
======================================
  Files        197     197            
  Lines      21652   21652            
  Branches    6938    7207   +269     
======================================
  Hits       21586   21586            
+ Misses        66      60     -6     
- Partials       0       6     +6     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.