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

Question

Using CSS, how can I style the following:

    
Mercury
    
Mercury (0.4 AU from the Sun) is the closest planet to th         


        

Answer 1

CSS Grid layout

Like tables, grid layout enables an author to align elements into columns and rows.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

To change the column sizes, take a look at the grid-template-columns property.

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

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

  
Mercury
  
Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.
  
Venus
  
Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.
  
Earth
  
Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.