<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.