How to Make HTML <dt> and <dd> Elements Stay on the Same Line

In this snippet, you will find some methods of forcing the <dt> and its corresponding <dd> element to stay on the same line. You need to use some CSS.

Solutions with CSS

Use the CSS float property to make the <dt> and <dd> stay side by side. Also, adjust the widths. In our example below, we use percentages for the width properties.

Example of forcing the <dt> and <dd> elements stay on the same line:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      dl {
        width: 100%;
        overflow: hidden;
        background: #dbe0da;
        padding: 0;
        margin: 0
      }
      dt {
        float: left;
        width: 50%;
        background: #8b9fe0;
        padding: 0;
        margin: 0
      }
      dd {
        float: left;
        width: 50%;
        background: #dbe0da;
        padding: 0;
        margin: 0
      }
    </style>
  </head>
  <body>
    <dl>
      <dt>HTML</dt>
      <dd>
        It is the standard markup language for documents designed to be displayed in the web browser.
      </dd>
      <dt>CSS</dt>
      <dd>
        It is a style sheet language, which is used to describe the presentation of a document in a markup language.
      </dd>
    </dl>
  </body>
</html>

Result

HTML
It is the standard markup language for documents designed to be displayed in the web browser.
CSS
It is a style sheet language, which is used to describe the presentation of a document in a markup language.

So, we displayed the contents of <dt> elements in one column, and the contents of the corresponding <dd> elements in another, and they are on the same line.

Let’s see another example.

Example of forcing the <dt> and <dd> elements to stay on the same line with the ::after pseudo-element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      dl {
        border: 1px double #000;
        padding: 10px;
      }
      dt {
        float: left;
        clear: left;
        width: 100px;
        text-align: right;
        font-weight: bold;
        color: #112b80;
      }
      dt::after {
        content: ":";
      }
      dd {
        margin: 0 0 0 110px;
        padding: 0 0 0.5em 0;
      }
    </style>
  </head>
  <body>
    <dl>
      <dt>CSS</dt>
      <dd>Cascading Style Sheets</dd>
      <dt>HTML</dt>
      <dd>HyperText Markup Language</dd>
    </dl>
  </body>
</html>

In the example above, we used the clear property with the float. We also added the ::after pseudo-element on the <dt> element.

You can also make the <dt> and <dd> elements stay on the same line by using the Flexbox. Set the display property to “flex” for the <dl> element.

Example of forcing the <dt> and <dd> elements to stay on the same line with Flexbox:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      dl {
        display: flex;
        flex-flow: row wrap;
        border: solid #666;
        border-width: 1px 1px 0 0;
      }
      dt {
        flex-basis: 20%;
        padding: 2px 4px;
        background: #666;
        text-align: right;
        color: #fff;
      }
      dd {
        flex-basis: 70%;
        flex-grow: 1;
        margin: 0;
        padding: 2px 4px;
        border-bottom: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <dl>
      <dt>CSS</dt>
      <dd>Cascading Style Sheets</dd>
      <dt>HTML</dt>
      <dd>HyperText Markup Language</dd>
    </dl>
  </body>
</html>

Here, we also added the flex-flow property with the “row wrap” value for the <dl> element. Then, we specified the flex-basis property for both the <dt> and <dd> elements, and the flex-grow property for the <dd> element.