simple dual columns in simple css

columns-nn-nn.css

/* You can add global styles to this file, and also import other style files */

.columns-80-20 {
  display: grid;
  grid-template-areas: 'left right';
  grid-template-columns: 80% 20%;

  *:nth-child(0) {
    grid-area: left;
    overflow: scroll;
  }
  *:nth-child(1) {
    grid-area: right;
    overflow: scroll;
  }
}

.columns-70-30 {
  display: grid;
  grid-template-areas: 'left right';
  grid-template-columns: 70% 30%;

  *:nth-child(0) {
    grid-area: left;
    overflow: scroll;
  }
  *:nth-child(1) {
    grid-area: right;
    overflow: scroll;
  }
}

.columns-60-40 {
  display: grid;
  grid-template-areas: 'left right';
  grid-template-columns: 60% 40%;

  *:nth-child(0) {
    grid-area: left;
    overflow: scroll;
  }
  *:nth-child(1) {
    grid-area: right;
    overflow: scroll;
  }
}

.columns-50-50 {
  display: grid;
  grid-template-areas: 'left right';
  grid-template-columns: 50% 50%;

  *:nth-child(0) {
    grid-area: left;
    overflow: scroll;
  }
  *:nth-child(1) {
    grid-area: right;
    overflow: scroll;
  }
}

.columns-40-60 {
  display: grid;
  grid-template-areas: 'left right';
  grid-template-columns: 40% 60%;

  *:nth-child(0) {
    grid-area: left;
    overflow: scroll;
  }
  *:nth-child(1) {
    grid-area: right;
    overflow: scroll;
  }
}

.columns-30-70 {
  display: grid;
  grid-template-areas: 'left right';
  grid-template-columns: 30% 70%;

  *:nth-child(1) {
    grid-area: left;
    overflow: scroll;
  }
  *:nth-child(2) {
    grid-area: right;
    overflow: scroll;
  }
}

.columns-20-80 {
  display: grid;
  grid-template-areas: 'left right';
  grid-template-columns: 20% 80%;

  *:nth-child(0) {
    grid-area: left;
    overflow: scroll;
  }
  *:nth-child(1) {
    grid-area: right;
    overflow: scroll;
  }
}