title: Trying to Line Break Button and Item
body: <p>Here is the code I am using (<a href="http://jsbin.com/ESOdELU/1/edit" rel="nofollow">http://jsbin.com/ESOdELU/1/edit</a>) -</p>
  
  <pre><code>var wordRandomizer = {
  run : function(targetElem) {
  var markup = this.createMarkup();
  targetElem.appendChild(markup);
  },
  createMarkup : function() {
  var that = this;
  var frag = document.createDocumentFragment();
  
  this.elem = document.createElement('span');
  
  var button = document.createElement('button');
  button.innerText = 'Change Item';
  button.addEventListener('click', function() {
    that.changeItem();
  });
  
  frag.appendChild(this.elem);
  frag.appendChild(button);
  
  return frag;
  },
  changeItem : function() {
  var rand = this.getRandInt(1, this.items.length) - 1;
  console.log(rand);
  this.elem.innerText = this.items[rand];
  },
  getRandInt : function(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
  },
  items : [
  'itemA',
  'itemB',
  'itemC',
  'itemD'
  ]
  };
  
  wordRandomizer.run(document.body);
  </code></pre>
  
  <p>I want to be able to generate the items below the button opposed to beside it. How can I do this? As a bonus I would also like to know how I can format the font of the items without having to edit each item.</p>