How to ensure two elements have the same height at all screen widths, when their heights are defined by their content?

Question

I have an existing page, with two separate elements, each with a height set by their content (CodePen here). How can I ensure the two have the same height, at all screen widths? The catch is, I can't use CSS flex or grid :-/ Rather, the two elements cannot be in the same flex container, or grid container. I say that because a large page has already been built, with a certain HTML structure that doesn't allow these elements to be in the same flex/grid containers (see sample page here).

I'm willing to entertain somewhat hack solutions.

I'm open to JavaScript as well, if that might help.

Option

I thought about a JavaScript solution to read the height of element 2, and set the height of element 1 to that value. But what happens if a user resizes his browser--are the two elements guaranteed to stay the same height? What happens if a user is on mobile, and rotates the display--are the two elements guaranteed to stay the same height?

Thanks.

---

My CodePen Code:

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

Sure, it would be easier with flexbox :)

If you can use table, then, you can do something alike:

/* 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>

If you need distinct columns, you can just add an empty column and set the different width accordingly:

#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>

If you can use CSS variables (see comptability):

#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

How about using 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 Support: https://caniuse.com/#feat=flexbox