CSS Grid With Two Columns Including One That Scrolls

Deatils

EXAMPLE

HTML

<div id="col-wrapper">
  <div id="col-a">
    <p>
      Drop the ashes on the worn old rug. Beat the dust from the rug onto the
      lawn. The point of the steel pen was bent and twisted. A chink in the wall
      allowed a draft to blow. Pour the stew from the pot into the plate. The
      cigar burned a hole in the desk top. Two blue fish swam in the tank.
    </p>
    <p>
      Seed is needed to plant the spring corn. It takes heat to bring out the
      odor. The ripe taste of cheese improves with age. It snowed, rained, and
      hailed the same morning.
    </p>

    <p>
      The man wore a feather in his felt hat. Much of the story makes good
      sense. He wrote down a long list of items. Write at once or you may forget
      it. The paper box is full of thumb tacks. Pluck the bright rose without
      leaves.
    </p>
  </div>
  <div id="col-b">
    <p>
      This horse will nose his way to the finish. No hardship seemed to keep him
      sad. We now have a new base for shipping. Raise the sail and steer the
      ship northward. The urge to write short stories is rare. He broke a new
      shoelace that day. The grass curled around the fence post. The fruit peel
      was cut in thick slices. The salt breeze came across from the sea. It's
      easy to tell the depth of a well. Glue the sheet to the dark blue
      background.
    </p>

    <p>
      It's a dense crowd in two distinct ways. The sun came up to light the
      eastern sky. He used the lathe to make brass objects. The pencils have all
      been used. Weave the carpet on the right hand side. Lift the square stone
      over the fence.
    </p>

    <p>
      No cement will hold hard wood. That move means the game is over. He took
      the lead and kept it the whole distance. Just hoist it up and take it
      away, Tack the strip of carpet to the worn floor. The map had an X that
      meant nothing. Jazz and swing fans like fast music. The petals fall with
      the next puff of wind. The jacket hung on the back of the wide chair. The
      tree top waved in a graceful way. Guess the results from the first scores.
      The bark of the pine tree was shiny and dark. There are more than two
      factors here.
    </p>

    <p>
      Heave the line over the port side. The frosty air passed through the coat.
    </p>

    <p>
      The marsh will freeze when cold enough. Twist the valve and release hot
      steam. Feed the white mouse some flower seeds. The dirt piles were lines
      along the road. The houses are built of red clay bricks. Some ads serve to
      cheat buyers. Torn scraps littered the stone floor. The wide road
      shimmered in the hot sun.
    </p>

    <p>
      The dry wax protects the deep scratch. The thaw came early and freed the
      stream. The office paint was a dull sad tan. The dune rose from the edge
      of the water.
    </p>

    <p>
      The straw nest housed five robins. Say it slowly but make it ring clear.
      The ramp led up to the wide highway. Jerk the dart from the cork target.
      Smoke poured out of every crack. The key you designed will fit the lock.
      It takes a good trap to capture a bear. Bring your best compass to the
      third class. We admire and love a good cook. The curtain rose and the show
      was on.
    </p>
    <p>
      Hats are worn to tea and not to dinner. The drip of the rain made a
      pleasant sound. Tend the sheep while the dog wanders. Our plans right now
      are hazy. Let it burn, it gives us warmth and comfort. The doorknob was
      made of bright clean brass. A fresh start will work such wonders. The sofa
      cushion is red and of light weight. Those words were the cue for the actor
      to leave.
    </p>

    <p>
      A lathe cuts and trims any wood. Roads are paved with sticky tar. Mark the
      spot with a sign painted red. Add salt before you fry the egg. On the
      islands the sea breeze is soft and mild. There was a sound of dry leaves
      outside. The young kid jumped the rusty gate. The pipe began to rust while
      new.
    </p>

    <p>
      Throw out the used paper cup and plate. They slice the sausage thin with a
      knife. Draw the chart with heavy black lines. He crawled with care along
      the ledge. Cut the pie into large parts. A small creek cut across the
      field.
    </p>

    <p>
      He wheeled the bike past the winding road. The bloom of the rose lasts a
      few days. The sand drifts over the sill of the old house. A cold dip
      restores health and zest. The sheep were led home by a dog. The list of
      names is carved around the base. The logs fell and tumbled into the clear
      stream. A castle built from sand fails to endure. Ducks fly north but lack
      a compass. The coffee stand is too high for the couch. A salt pickle
      tastes fine with ham. The ink stain dried on the finished page. The source
      of the huge river is the clear spring.
    </p>

    <p>
      Screen the porch with woven straw mats. The desk was firm on the shaky
      floor. The fur of cats goes by many names. It is hard to erase blue or red
      ink. He ordered peach pie with ice cream. Use a pencil to write the first
      draft. Take the winding path to reach the lake.
    </p>

    <p>
      Bottles hold four kinds of rum. There is a lag between thought and act.
      The lake sparkled in the red hot sun. This plank was made for walking on.
      They took the axe and the saw to the forest. Steam hissed from the broken
      valve. At that high level the air is pure. The spot on the blotter was
      made by green ink. The cup cracked and spilled its contents. Split the log
      with a quick, sharp blow. Open the crate but don't break the glass. The
      colt reared and threw the tall rider.
    </p>

    <p>
      Breakfast buns are fine with a hot drink. Once we stood beside the shore.
      Each penny shone like new. He carved a head from the round block of
      marble. These thistles bend in a high wind. Oak is strong and also gives
      shade.
    </p>

    <p>
      Fasten two pins on each side. A siege will crack the strong defense. Corn
      cobs can be used to kindle a fire. The birch canoe slid on the smooth
      planks.
    </p>

    <p>
      The desk and both chairs were painted tan. A gray mare walked before the
      colt. Soap can wash most dirt away. Go now and come here later. The vane
      on top of the pole revolved in the wind. He wrote his last novel there at
      the inn. Where were they when the noise started. A wisp of cloud hung in
      the blue air. A saw is a tool used for making boards. The box was thrown
      beside the parked truck. Rice is often served in round bowls.
    </p>
  </div>
</div>

CSS

#col-wrapper {
  display: grid;
  grid-template-columns: 200px 1fr;
}

#col-a {
  border: 1px solid red;
  height: 300px;
  overflow-y: scroll;
}

JavaScript

const kickoff = () => {
    console.log("kickoff")
}

document.addEventListener('DOMContentLoaded', kickoff)