Within one format block, how to define a span inside with a specific class?

[iamkarlson]

Hello,
I'm trying to create a format for my network module so I can hide it or show depending on the output screen resolution. Something like that:

"format-wifi": "﬉ {signalStrength}% <span class=\"network_details\"> {bandwidthDownBytes}  {bandwidthUpBytes} </span>",

@media (max-width: 1081px) {
  .network_details {
    display: none;
  }
}

I would love to show only signal strength for small screens, while for big screens, bandwidth up/down would be possible to display. I'm aware that I can define different styles per output (see issue for details) but it's a bit different use case. I would expect that I may use small monitors or big ones with the same output ID, so I cannot rely on the output name to style my module.

What would be the correct conventional way to achieve this behaviour within a waybar?