title: force div element to the top
body: <p><a href="https://i.stack.imgur.com/ISEhU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ISEhU.png" alt="application for project"></a>
  <a href="http://codepen.io/anon/pen/zqQJNM" rel="nofollow noreferrer">http://codepen.io/anon/pen/zqQJNM</a> code pen for html and the css 
  I am trying to force the picture of the items to the top or the middle of the picture of the character I am not really sure how this is done any help? I have tried vertical-align different positions css is my weakest region so any help would be greatly appreciated!</p>
  
  <pre><code>#information{
  background-color: CCFFFF;
  border: groove;
  width:100%;
  height: 230px;
  }
  
  #summonerBox{
  width: : 100px;
  background-color: ;
  
  }
  #summonerInput{
  width:200px;
  height: 20px;
  background-color: white;
  }
  .winBg{
  background-color: green;
  }
  .loseBg{
  background-color: red;
  }
  #itemList1{
  position: inherit;
  display: inline-block;
  margin-left: 300px;
  list-style-type: none;
  vertical-align:top;
  
  
  }
  #itemlist2{
  display: inline-block;
  margin-left: 300px;
  list-style-type: none;
  
  }
  #goldEarned{
  list-style-type: none;
  
  
  }
  #gameType{
  list-style-type: none;
  
  
  }
  #summonerGame{
  list-style-type: none;
  
  }
  </code></pre>