<div class="container">
<div class="child">🌮🌮🌮</div>
<div class="child">🎩🎩🎩</div>
<div class="child">✨✨✨</div>
</div>
.container {
display: flex;
align-items: baseline;
}
.child {
flex: 1;
background: deeppink;
height: 150px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-around;
font-size: 3rem;
border-right: 1px solid white;
color: white;
}
.child:hover {
flex: 2;
background: deepskyblue;
color: black;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.