There is such code:

<div class="main" style="background: #acdf43; text-align: center;"> <div class="l1" style="display: inline-block; background: #aaa;">123123123123123123123123123<br>321321321321321321321321321321321321321321321<br>111111111111111111<br>222222<br>333333333</div> <div class="l2" style="display: inline-block; background: #f00; vertical-align: bottom; height: 100%; width: 100px;">000</div> </div>

The block L1 has a variable height and width. It is necessary that the L2 block has the same height as the L1 block. Set height: 100% does not help. The height does not change.

For L1, the width is not set, but for L2 it is set and fixed.

Here are screenshots to understand. There is now: there is
(source: joxi.ru )

It is necessary: need to
(source: joxi.ru )

    2 answers 2

    height: 100% in the class l2 will not work, because Currently, the height of the parent block is calculated by its content. For this property to work, it is necessary in the main class to explicitly indicate the height of the block, for example:

     <div class="main" style="background: #acdf43; text-align: center; height: 90px;"> <div class="l1" style="display: inline-block; background: #aaa;">123123123123123123123123123<br>321321321321321321321321321321321321321321321<br>111111111111111111<br>222222<br>333333333</div> <div class="l2" style="display: inline-block; background: #f00; vertical-align: bottom; height: 100%; width: 100px;">000</div> </div>

    But the task is to determine the height dynamically. In this case, I would use javascript

     <div class="main" style="background: #acdf43; text-align: center;"> <div class="l1" style="display: inline-block; background: #aaa;">123123123123123123123123123<br>321321321321321321321321321321321321321321321<br>111111111111111111<br>222222<br>333333333</div> <div class="l2" style="display: inline-block; background: #f00; vertical-align: bottom; width: 100px;">000</div> </div> <script> var l1H = document.getElementsByClassName("l1")[0].offsetHeight; document.getElementsByClassName("l2")[0].style.height = l1H + "px"; </script>

    That is, l1 is generated depending on the content. Next, the script gets its height and assigns it via the CSS property height element l2

      And through the flex property did not try? Why this old mess with teyblami.

       <div class="main" style="text-align: center; background: #acdf43; display:flex;"> <div class="l1" style="margin-left:auto; background: #aaa;">123123123123123123123123123<br>321321321321321321321321321321321321321321321<br>111111111111111111<br>222222<br>333333333</div> <div class="l2" style="margin-right: auto; background: #f00;">000</div> </div>

      • Attribute, of course, cool, but what to do with support for obsolete browsers? For example, on IE under the 10th version - Pogromist
      • Apparently, just to score on the support of old browsers, I think it is a matter of time, they are slowly going into oblivion, of course, if you need the support of older browsers, this is not an option. - Anton Essential
      • But it means to drop immediately ~ 25-30% of users. Although of course it all depends on the purpose of the product and Central Asia. - A pogromist engineer