How to write <dt> and <dd> element on the same line using CSS ?

The <dt> and <dd> tags are used together within the <dl> (defines a description list) tag in HTML to define terms or give their description. The <dt> tag is used to specify the description list. The <dd> tag stands for definition description and used to denote the description or definition of an item in a description list. The <dl> tag is used to represent the description list. This tag is used with <dt> and <dd> tags.

Example 1: This example uses <dt> and <dd> tags within <dl> tag and display the <dt> and <dd> content on different line.
 

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to write dt and dd element
        on the same line using CSS ?
    </title>
  
    <style>
        dt {
            font-weight: bold;
            color: green;
        }
  
        dt::after {
            content: ":";
        }
    </style>
</head>
  
<body>
    <dl>
        <dt>Name</dt>
        <dd>Cristiano Ronaldo</dd>
        <dt>Date of birth</dt>
        <dd>5 February 1985 (age 35)</dd>
        <dt>Nationality</dt>
        <dd>Portugal</dd>
        <dt>Profession</dt>
        <dd>Footballer</dd>
    </dl>
</body>
  
</html>

chevron_right


Output: 
 

Example 2:  This example uses <dt> and <dd> tags within <dl> tag and display the <dt> and <dd> content on the same line using CSS.
 



HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        dt {
            float: left;
            clear: left;
            width: 110px;
            font-weight: bold;
            color: green;
        }
  
        dt::after {
            content: ":";
        }
  
        dd {
            margin: 0 0 0 80px;
            padding: 0 0 0.5em 0;
        }
    </style>
</head>
  
<body>
    <dl>
        <dt>Name</dt>
        <dd>Cristiano Ronaldo</dd>
        <dt>Date of birth</dt>
        <dd>5 February 1985 (age 35)</dd>
        <dt>Nationality</dt>
        <dd>Portugal</dd>
        <dt>Profession</dt>
        <dd>Footballer</dd>
    </dl>
</body>
  
</html>

chevron_right


Output: 
 

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.