<section id="container">
  <div class="padre">
    <div class="tipo" id="fuego"></div>
    <div class="tipo" id="agua"></div>
  </div>  
  <img class="pokemon" src="http://i65.tinypic.com/j0itlk.png" />
  <img class="pokemon" src="http://i65.tinypic.com/214vxts.png" />
  <img class="pokemon" src="http://i66.tinypic.com/ckf41.jpg"/>
  <img class="pokemon" src="http://i66.tinypic.com/2nq5pp3.png" />
</section>
<div id="resultado">...</div>
#container {
  width: 580px;
  height: 250px;
  margin: 0 auto;
  border: 1px solid black;
  text-align: center;
}
.padre {  
  width: 580px;
  height: 120px;
  display: flex;
  justify-content: space-between;
}
.tipo {
 flex-grow: 1;
}
#fuego {
 background-color: #ffd54c;
}
#agua {
  background-color: #42ccff;
}
#resultado {
  text-align: center;
  font-size: 30px;
}
.pokemon {
   margin: 10px;
   height: 80px;
   width: 80px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.