<section id="container">
  <div class="padre">
    <div class="tipo" id="fuego"></div>
    <div class="tipo" id="agua"></div>
  </div>  
</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;
}
.tipo {
 flex-grow: 1;
}
#fuego {
 background-color: #ffd54c;
}
#agua {
  background-color: #42ccff;
}
#resultado {
  text-align: center;
  font-size: 30px;
}