How to style dt and dd so they are on the same line with CSS?

Spread the love

Sometimes, we want to style dt and dd so they are on the same line with CSS.

In this article, we’ll look at how to style dt and dd so they are on the same line with CSS.

To style dt and dd so they are on the same line with CSS, we can use grid.

For instance, we write

<dl>
  <dt>Mercury</dt>
  <dd>Mercury ...</dd>
  <dt>Venus</dt>
  <dd>Venus ...</dd>
  <dt>Earth</dt>
  <dd>Earth ...</dd>
</dl>

to add the dl, dt, and dd elements.

Then we write

dl {
  display: grid;
  grid-template-columns: max-content auto;
}

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

to make the dl’s content display in a grid with display: grid;.

Then we put the dt and dd into the grid columns with grid-column-start.

To style dt and dd so they are on the same line with CSS, we can use grid.