How to make the green div adjust its height based on the content like the red div? This means that when the text in the green box increases, the height of the red box should also increase to match it. I am aware that removing the span from .aaa might solve the issue, but due to other coding constraints, this is not a feasible solution. The .aaa span has to be retained.
.aaa span {
display: flex;
padding: 20px;
font-size: 1.6em;
}
.bbb {
width: 50%;
float: left;
text-align: left;
color: black;
background: red;
}
.ccc {
width: 30%;
text-align: center;
background-color: green;
}<div class="wrapper">
<div class="aaa"><span class="bbb">Hello hello hello hello hello Hello hello hello hello hellotitle titletitle titletitle titletitle titletitle titletitle title</span>
<span class="ccc">12345</span>
</div>
</div>f f f