Make A HTML With Two Columns Of Equal Height And One Of Them Scrollable

I have a HTML-table consisting of one row and two columns (in other words, just two cells). The idea was to make the two columns (i.e. the two cells) have equal height, which - at

Solution 1:

Here is the solution using CSS:

table {
  position: relative;
}

td {
  background: red;
  width: 200px;
}

.column2>div {
  height: 100%;
  overflow: auto;
  position: absolute;
  top: 0;
  width: 200px;
}

<table>
  <tr>
    <td class="column1">
      <div> a<br> a<br> a<br> </div>
    </td>
    <td class="column2">
      <div> b<br> b<br> b<br> b<br> b<br> b<br> </div>
    </td>
  </tr>
</table>

Solution 2:

Try like that

var maxHeight = 0;

$("div").each(function(){
  if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$("div").height(maxHeight);