Как сделать так, чтобы два элемента имели одинаковую высоту при любой ширине экрана, если их высота определяется их содержимым?

Question

У меня есть существующая страница с двумя отдельными элементами, каждый с высотой, установленной их содержимым ( CodePen здесь ). Как я могу гарантировать, что они имеют одинаковую высоту при любой ширине экрана? Суть в том, что я не могу использовать CSS flex или grid: - / Скорее, два элемента не могут находиться в одном контейнере flex или контейнере сетки. Я говорю это, потому что большая страница уже построена, с определенной структурой HTML, которая не позволяет этим элементам находиться в одинаковых контейнерах flex / grid ( см. Образец страницы здесь) .

Я готов принять несколько хакерских решений.

Я также открыт для JavaScript, если это может помочь.

Опция

Я подумал о JavaScript решении, чтобы прочитать высоту элемента 2 и установить высоту элемента 1 на это значение. Но что произойдет, если пользователь изменит размер своего браузера - два элемента гарантированно останутся на одной высоте? Что происходит, если пользователь находится на мобильном телефоне и поворачивает дисплей - гарантированно, что два элемента будут оставаться на одной высоте?

Спасибо.

---

Мой код CodePen:

HTML

<div class='a'>Element A</div>
<div class='b'>Element B:  Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. </div>

CSS

.a {
  display: inline-block;
  background-color: yellow;
  width: 45%;
  border: 1px solid black;
}

.b {
  display: inline-block;
  background-color: red;
  width: 45%;
  border: 1px solid black;
}

Answer 1

Конечно, было бы проще с flexbox:)

Если вы можете использовать таблицу, то вы можете сделать что-то похожее:

/* Added */
#wrapper{
 display: table;
 width: 100%;
}

.a {  
  display: table-cell; /* Added */
  vertical-align: top; /* Added */
  /* display: inline-block; */
  background-color: yellow;
  width: 50%; /* Changed */
  border: 1px solid black;
}

.b {
  display: table-cell; /* Added */
  vertical-align: top; /* Added */
  /* display: inline-block; */
  background-color: red;
  width: 50%; /* Changed */
  border: 1px solid black;
}

<div id="wrapper">
  <div class='a'>Element A</div>
  <div class='b'>Element B:  Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. </div>
<div>

Если вам нужны отдельные столбцы, вы можете просто добавить пустой столбец и соответственно установить другую ширину:

#wrapper{
 display: table;
 width: 100%;
}

.a {  
  display: table-cell;
  vertical-align: top;
  background-color: yellow;
  width: 45%; /* Changed */
  border: 1px solid black;
}

.b {
  display: table-cell;
  vertical-align: top;
  background-color: red;
  width: 45%; /* Changed */
  border: 1px solid black;
}

/*added*/
.gap{
  display: table-cell;
  vertical-align: top;
  width: 10%; /* which is 100 - 2* 45 */
}

<div id="wrapper">
  <div class='a'>Element A</div>
  <!-- ------------------------Added------------------------------ -->
  <div class='gap'></div>
  <!-- ----------------------------------------------------------- -->
  <div class='b'>Element B:  Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. </div>
<div>

Если вы можете использовать CSS переменные ( см. Совместимость ):

#wrapper{
 display: table;
 width: 100%;
 --column-width: 49%; /* so you can set any value between 0 & 50% and the gap will fill the rest */
 --number-of-column: 2; /* minimun 2 */
 --number-of-gap: calc(var(--number-of-column) - 1);
 --column-gap: calc((100% - var(--column-width) * var(--number-of-column)) / var(--number-of-gap));
}

.columns{
  display: table-cell;
  vertical-align: top;
}
.column-content{
  width: var(--column-width);
  border: 1px solid black;
}

.column-gap{
  width: var(--column-gap, 0%); /* If we set just one column, --column-gap is undefined (because it divises by 0), so we need a default value, which is 0% because in this case of only one column, we have no gap column */
}

.a {
  background-color: yellow;
}

.b {
  background-color: red;
}

<div id="wrapper">
  <div class='columns column-content a'>Element A</div>
  <div class='columns column-gap'></div>
  <div class='columns column-content b'>Element B:  Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. </div>
<div>

Answer 2

Как насчет использования Flex?

HTML:

<div class="row-test">
<div class='a'>Element A</div>
<div class='b'>Element B:  Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. </div>
</div>

CSS:

.a {
  display: inline-block;
  background-color: yellow;
  width: 45%;
  border: 1px solid black;
  flex: 1;
}

.b {
  display: inline-block;
  background-color: red;
  width: 45%;
  border: 1px solid black;
  flex: 1;
}

.row-test {
  display: flex
}

Awesome Flex Guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Поддержка Flex: https://caniuse.com/#feat = flexbox