JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js"></script>
<div id="game_div"> </div>

CSS

#game_div {
      width: 400px;
      margin: auto;
      margin-top: 50px;
    }

JavaScript

//Phaser game initialization
var game = new Phaser.Game(480,320,Phaser.AUTO,'game_div');
var gameStates = {};

gameStates.Main = function(game){};

gameStates.Main.prototype = {
	preload: function() {
  this.load.crossOrigin = "Anonymous";
		this.load.image('shop','https://s1.postimg.org/6fz3duzc0r/user_input_box.png'); 
	},

	create:function(){
	  var btnText = this.add.text(0,0,"Game Loaded",{fill:"#ffffff"});
    var infoText = this.add.text(0,0,"This is a description of the game. It is only an informative text and it should not take click of its parent button. Try clicking this text",{fill:"#ffffff", wordWrap:true,wordWrapWidth:450});
		var shopBtn = this.add.button(0,
0,'shop', function(){
			btnText.text = "Shop Clicked";
    }, this);
    shopBtn.anchor.setTo(0.5, 0);    
    shopBtn.addChild(infoText);
    shopBtn.addChild(btnText);
    btnText.alignTo(shopBtn, Phaser.TOP_CENTER);
		infoText.alignTo(shopBtn, Phaser.BOTTOM_CENTER,0,20);
    shopBtn.x = this.game.width/2;
    shopBtn.y = this.game.height*0.2;
	}
}

game.state.add('main',gameStates.Main);
game.state.start('main');