Increasing height in span

Question

How to get the green div have the same variable height as the red div? Meaning when the text in green grows, that then also the height of the red box grows to be the same as the green box. I know I can remove the span from .aaa, but for other code impact this is not feasible solution. .aaa span has to remain.

.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

Make your aaa flex, remove float from bbb – Huangism Dec 11 '17 at 16:32 — Huangism, Dec 11 '17 at 16:32

score 2 · Accepted Answer · answered Dec 11 '17 at 16:34

Split up your first CSS rule like this:

.aaa {
  display: flex;
}

.aaa span {
  padding: 20px;
  font-size: 1.6em;
}

The flex property needs to be assigned to the container, not to the spans. And float isn't necessary.

.aaa {
  display: flex;
}

.aaa span {
  padding: 20px;
  font-size: 1.6em;
}

.bbb {
  width: 50%;
  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>

thanks, that solved it! - will mark your answer when it allows me to do. — , Dec 11 '17 at 16:36

Increasing height in span

1 Answers1