(CSS) How to display a block (or inline) element only if room allows, in 2017?

As a designer, my first layout a few years removed from coding is turning out better than I hoped, thanks mostly to the help I got via these forums getting up to speed.

Back in the day, when we wanted to display a div only if there was room for it, we'd run a javascript check on the client's resolution, as so :

$(document).ready(function () {
   if ($(window).width() < 1024)
  $('body').addClass('too-narrow');
});

What I'm trying to accomplish is displaying a fixed-dimension <span> container floating right of paragraph text - but only if the flexible container is "at least this wide".

I'm looking for a very binary response here, as in the <span> is either there or it's not. If there's no room, I'd rather the code ignore the <span> altogether (rather than load it and just not display it) because it will carry a background image I'd rather not load if I don't need to. But maybe that's just me being greedy with what I want, not a must-have (if the img must load regardless, I am okay with it).

This is a bit different from simply checking screen or even viewport resolution, as I am specifically looking to create a rule based on the container's size. Are we there yet (as far as simple, universal code that can accomplish this easily; like those new CSS3 properties I'm still learning about) or am I better off relying on those 2011 js screen res methods when it comes to displaying a block or inline element solely if space allows?

Thanks in advance to all the usual suspects. You make the world a better place.