Media Queries do not apply on a custom block I wrote

I wrote a simple div block like so 
blockManager.add('simple-div', {
    label: 'Container',
    content: '"<!––<div class="simple-div"></div> ––>"',
    category: 'Basic',
    attributes: {
    title: 'Simple Box',
    class: 'fa fa-square'
  }
});

But it is NOT responsive whatsoever. This is how it is:
1.I set it's width 100% on desktop
2.I switch to tablet and set it's width 50%
3.I switch back to desktop and the width is still 50%
There are also no media queries in the CSS
(media queries work fine for images)

Am I missing some code that allows it to be responsive?

EDIT

I just realised that that the styling is being done to the element rather than a unique id/class
I used the following code to give the element a unique id
var comps = editor.DomComponents;

comps.addType('.simple-div', {
    init: function() {
      this.set('attributes', { id: randomID() });
    },
  });

How do I make it so that the styling doesn't go to element but the inline stylesheet