<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
  * {
    box-sizing: border-box;
  }

.box {
    float: left;
    width: 50%;
    padding: 50px;
    height: 300px;
  }

.clearfix::after {
    content: "";
    clear: both;
    display: table;
  }
  </style>
 </head>
 <body>

<h1>CSS Боксы одинаковой высоты</h1>
  
  <p>Плавающие боксы одинаковой высоты:</p>

<div class="clearfix">
    <div class="box" style="background-color:#bbb">
    <h2>Бокс 1</h2>
    <p>Какой-то контент, какой-то контент, какой-то контент</p>
    </div>
    <div class="box" style="background-color:#ccc">
    <h2>Бокс 2</h2>
    <p>Какой-то контент, какой-то контент, какой-то контент</p>
    <p>Какой-то контент, какой-то контент, какой-то контент</p>
    <p>Какой-то контент, какой-то контент, какой-то контент</p>
    </div>
  </div>

<p>Этот пример не очень гибкий. Можно использовать высоту CSS, если вы можете гарантировать, что в полях всегда будет одинаковое количество содержимого, но это не всегда так. Если вы попробуете приведенный выше пример на мобильном телефоне (или измените размер окна браузера), вы увидите, что содержимое второго окна будет отображаться за пределами окна.</p>
  <p> Вернитесь к руководству и найдите другое решение, если это не то, что вы хотите.</p>

</body>
</html>

Сообщить об ошибке: