How to make a dl list horizontal

Question

I have a list that looks like this:

<dl>
    <dt>Something</dt>
    <dd><div>Div with an image</div></dd>
    <dt>Second</dt>
    <dd><div>Second Div</div></dd>
</dl>

And when you run it on the page, it looks vertical, and I want it to look horizontal. The code looks like this:

Something
Div with an image
Second
Second Div

But I want something like this:

Something                     Second
Div with an image             Second Div

I can't change the dl and dt elements order, as it's a part of code that I can't modify. But all of them are tagged with classes or ids, so I can modify CSS.

So, is there any way to make the list look horizontal with this structure?

Answer 1

Solution using grid.

dl {
    display: grid;
    grid-template-rows: auto auto;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
}