display words at random position on click, in a container on mobile

I asked this question yesterday and was told to ask a new one to have an answer for a precision.

My code displays words on the page when the button is clicked.

It works perfectly, is it possible to contain it in a container ?

Cause i'd like this to only be displayed on mobile and when I reduce the browser page there's a huge scroll and all the words don't show in the window.

Just to try, I tried to contain it in a 300x300px box but the words appear everywhere. Is it possible either with the bootstrap grid or just any media queries, or like I did with any container ? Or is it another javascript rule ?

Thanks again !

var words = [
  'Hello',
  'No',
  'Hi',
  'Banana',
  'Apple'
];
var visible = 0;

document.querySelector("form").addEventListener("submit", function(e) {
  e.preventDefault();

  var fullWidth = window.innerWidth;
  var fullHeight = window.innerHeight;

  var elem = document.createElement("div");
  elem.textContent = words[visible];
  elem.style.position = "absolute";
  elem.style.left = Math.round(Math.random() * fullWidth) + "px";
  elem.style.top = Math.round(Math.random() * fullHeight) + "px";
  document.body.appendChild(elem);

  visible++;
});

<form>
  <input type="submit">
</form>