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

by 
dl {
  width: 100%;
  overflow: hidden;
  background: #ff0;
  padding: 0;
  margin: 0
}
dt {
  float: left;
  width: 50%;
  /* adjust the width; make sure the total of both is 100% */
  background: #cc0;
  padding: 0;
  margin: 0
}
dd {
  float: left;
  width: 50%;
  /* adjust the width; make sure the total of both is 100% */
  background: #dd0;
  padding: 0;
  margin: 0
}
<dl>
  <dt>Mercury</dt>
  <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
  <dt>Venus</dt>
  <dd>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.</dd>
  <dt>Earth</dt>
  <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>

More Related Contents:

  1. Can't get footer image to display in IE8?
  2. How to collect and manipulate data in HTML using
  3. SVG drop shadow using css3
  4. Switching the order of block elements with CSS [duplicate]
  5. Imitating a blink tag with CSS3 animations
  6. How can I force a long string without any blank to be wrapped?
  7. 100% Min Height CSS layout
  8. Equal space between flex items
  9. How to get a child element to show behind (lower z-index) than its parent?
  10. How to go up a level in the src path of a URL in HTML?
  11. :nth-child(even/odd) selector with class [duplicate]
  12. How to CSS: select element based on inner HTML [duplicate]
  13. left-right movement.. css only very generic
  14. How to disable CSS in Browser for testing purposes
  15. Equalize the height of left and right div, prevent right div from going below left div
  16. How to change an image on click using CSS alone?
  17. Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?
  18. How to center multiple divs inside a container in CSS
  19. How can I create a wavy shape CSS?
  20. Two div blocks on same line
  21. Auto height on parent container with Absolute/Fixed Children
  22. Display text, a dotted line then more text spanning the width of the page
  23. CSS Zigzag Border with a Textured Background
  24. How can I control the width of a label tag?
  25. How to change cursor color without changing text color?
  26. “break-inside: avoid-column” doesn’t work in Firefox
  27. How to make a flex item not fill the height of the flex container? [duplicate]
  28. Complete list of reasons why a css file might not be working
  29. What is HTML’s tag default display type?
  30. How to create a heart shape using CSS?

Leave a Comment