JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tribute-info">
    <div id="dates">
      <h2>1929</h2>
      <h2>1944</h2>
      <h2>1948</h2>
      <h2>1951</h2>
      <h2>1955</h2>
    </div>
    <div id="what-happened">
      <p class="info" id="1929">Martin Luther King Jr. was born on January 15th, 1929.</p>
      <p class="info" id="1948">Dr. King skipped his last year of high school and began attending Morehouse College at the age of 15.</p>
      <p class="info" id="1948">Martin Luther King Jr. graduated from Morehouse College with a BA in sociology. He also began seminary school at Crozer Thological Seminary.</p>
      <p class="info" id="1952">He graduated from seminary school in 1951.</p>
      <p class="info" id="1955">Dr. King earned his PhD from Boston University.</p>
    </div>
  </div>

CSS

#tribute-info {
  display: grid;
  grid-template-columns: 25% 7% 43% 25%;
  grid-gap: 10px 10px;
  grid-template-areas: ". date content .";
}

#dates {
  grid-area: date;
  display: grid;
  grid-template-rows: repeat(10, 70px);
  grid-row-gap: 10px;
}

h2 {
  background: hsl(180, 50%, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 10px;
}

#what-happened {
  grid-area: content;
  display: grid;
  grid-template-rows: repeat(10, 70px);
  grid-row-gap: 10px;
}

.info {
  background: hsl(180, 40%, 80%);
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 10px;
}