Making Two Ordered Lists Appear Side by Side

switched to codepen
I’ll try the grid-template-rows method next to make both ordered lists appear next to each other with corresponding labels.

It’s better if you share a demo via codepen.

Hmm. From what I think you’re saying, you can use grid-template-areas in a container, and then map out how you want the layout to look by using that. Then assign each element to the proper grid area.

An example would be:
grid-template-areas:
“Title1 year1 title2 year2”
“List1 yrlist1 list2 yrlist2”;

You could wrap both ol in a flex container then style as such.

.flex-container {
     display: flex;
     align-items: center;
     justify-content: space-between; // space-between whatever you prefer
    flex-direction: row;
}




I was able to style it well using the flexbox method. Thank you!

1 Like