-2

Given a definition list such as

<dl>
  <dt>first term</dt>
  <dd>first term definition</dd>
        
  <dt>second term</dt>
  <dd>second term definition</dd>

  <dt>the third term</dt>
  <dd>third term definition</dd>
</dl>

I would like each term and it's definition to behave like a block, i.e. the definition should appear alongside the corresponding term like so

first term     first term definition
second term    second term definition
the third term third term definition

One way to achieve this would be to wrap each <dt> and <dd> pair in a <div> add add a rule

dt, dd {
  display: inline
}

But ideally I'd like to achieve this without adding any additional elements.

I'd also like the definitions to be left-aligned (as shown above) no matter how long each of the terms are, i.e. without using something like margin-left: 50px on the definitions.

Antonio Dragos
  • 1,973
  • 2
  • 29
  • 52
  • People are usually happier to help if you can show some code you've tried, and where you got stuck. As it is, you're basically asking someone to write the code for you, for free. – IMSoP Nov 09 '21 at 10:59
  • 1
    Does this answer your question? [How to style dt and dd so they are on the same line?](https://stackoverflow.com/questions/1713048/how-to-style-dt-and-dd-so-they-are-on-the-same-line) – Jax-p Nov 09 '21 at 11:02
  • @Jax-p no, because in that example the definitions are on the same line as the terms, but not alongside them – Antonio Dragos Nov 09 '21 at 11:04
  • 1
    "in that example the definitions are not alongside the terms" ... yes, they are. Just like in your example ("`first term first term definition`"). Can you elaborate why you cannot adapt that solution or why it's not fitting your problem further? – Niklas E. Nov 09 '21 at 11:07
  • @NiklasE. I don't want a huge gap between the terms and the definitions. I want the definitions to be left-aligned with one another and to appear immediately after the longest term – Antonio Dragos Nov 09 '21 at 11:10
  • @AntonioDragos Ok, I see the problem. Can you make a small edit to your question so I can retract my downvote? – Niklas E. Nov 09 '21 at 12:02

1 Answers1

1

I can't honestly recommend this as it may have unknown aspects by changing the natural display of the elements but CSS-Grid can do that.

dl {
  display: inline-grid;
}

dt {
  grid-column: 1
}

dd {
  grid-column: 2;
}
<dl>
  <dt>first term</dt>
  <dd>first term definition</dd>

  <dt>second term</dt>
  <dd>second term definition</dd>

  <dt>the third term</dt>
  <dd>third term definition</dd>
</dl>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • Grid layout, totally missed that this became a thing. RC since 2016. Roll out 17. Support looks great: [display: inline-grid](https://caniuse.com/?search=inline-grid#:~:text=This%20feature%20is%20deprecated%2Fobsolete,Available%20to%20Firefox%20UI%20code) – Niklas E. Nov 09 '21 at 12:26