CSS Tip

One column to control the height of another

Make one column control the height of another column whatever its content.

Below, the left column will control the right column.

No JavaScript is needed, only three lines of CSS will do the job

equal height column

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.grid .left {/*nothing here*/}
.grid .right {
  height: 0;
  min-height: 100%;
  overflow: auto;
}

See the Pen CSS grid - dynamic columns by Temani Afif (@t_afif) on CodePen.

More detail: dev.to/afif/responsive-text-based-on-image-size-36n9

More CSS Tips