Utilizing CSS Grid Layout

Similar to tables, grid layout allows a designer to organize elements into organized columns and rows.
Learn more about CSS Grid Layout here

If you need to adjust the column sizes, refer to the grid-template-columns property.

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

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

<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>

I have discovered a solution that doesn't rely on floats!
Take a look at this codepen link

Viz.

dl.inline dd {
  display: inline;
  margin: 0;
}
dl.inline dd:after{
  display: block;
  content: '';
}
dl.inline dt{
  display: inline-block;
  min-width: 100px;
}

Update - 3^rd Jan 2017: I have implemented a flex-box based solution for the issue. You can view and customize it in the provided codepen link.

dl.inline-flex {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  width: 300px;      /* adjust container width as needed */
  overflow: visible;
}
dl.inline-flex dt {
  flex: 0 0 50%;
  text-overflow: ellipsis;
  overflow: hidden;
}
dl.inline-flex dd {
  flex:0 0 50%;
  margin-left: auto;
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
}

If you are utilizing Bootstrap 3 (or an earlier version)...

<dl class="dl-horizontal">
    <dt>Title:</dt>
    <dd>
      Explanation of celestial body
    </dd>
    <dt>Title2:</dt>
    <dd>
      Description of celestial body
    </dd>
</dl>

If you are aware of the margin width:

dt { position: absolute; left: 0; width: 100px; }
dd { margin-left: 100px; }

After exploring various examples that didn't quite fit my needs, I came up with a foolproof solution that works perfectly for my specific case.

dd {
    margin: 0;
}
dd::after {
    content: '\A';
    white-space: pre-line;
}
dd:last-of-type::after {
    content: '';
}
dd, dt {
    display: inline;
}
dd, dt, .address {
    vertical-align: middle;
}
dt {
    font-weight: bolder;
}
dt::after {
    content: ': ';
}
.address {
    display: inline-block;
    white-space: pre;
}

Surrounding

<dl>
  <dt>Phone Number</dt>
  <dd>+1 (800) 555-1234</dd>
  <dt>Email Address</dt>
  <dd><a href="#"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97f2eff6fae7fbf2d7f2eff6fae7fbf2b9f4f8fa">[email protected]</a></a></dd>
  <dt>Postal Address</dt>
  <dd><div class="address">123 FAKE ST<br />EXAMPLE EX  00000</div></dd>
</dl>

Text

Interestingly, the solution does not work with display: inline-block. To adjust the size of dt or dd elements, one could try setting the dl's display as

display: flexbox; display: -webkit-flex; display: flex;

Check out the live demo on jsFiddle

I recently needed to create a specific list layout for a project showcasing employees of a company. I wanted their photos on the left and information on the right. To achieve this, I used pseudo-elements after each DD:

.myList dd:after {
  content: '';
  display: table;
  clear: both;
}

Furthermore, I only wanted the text to appear next to the image without wrapping underneath it (creating a pseudo-column effect). This can be done by enclosing the content of the DD tag within a DIV element styled with overflow: hidden;. Skipping this extra DIV would cause the content to wrap below the floated DT.

After some experimentation, I managed to make it work with multiple DT elements per DD, although not vice versa. I attempted to add an additional class to clear only after the last DD, but it resulted in subsequent DD elements wrapping under the DT items instead of forming columns (not the desired outcome... I aimed for distinct columns for DT and DD).

In theory, this should only function correctly in IE8 and above, but an unexpected behavior in IE7 made it work there as well.

If you're looking to create a clean layout, CSS Grid is the way to go:

dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

<dl>
<dt>Title 1</dt>
<dd>Description 1</dd>
<dt>Title 2</dt>
<dd>Description 2</dd>
<dt>Title 3</dt>
<dd>Description 3</dd>
<dt>Title 4</dt>
<dd>Description 4</dd>
<dt>Title 5</dt>
<dd>Description 5</dd>
</dl>

Here is an alternative method that involves displaying the dt and dd inline, with a line break added after each dd element.

dt, dd {
 display: inline;
}
dd:after {
 content:"\a";
 white-space: pre;
}

This technique mirrors Navaneeth's earlier solution, but with this approach, the content will not be aligned in a table-like format. Instead, the dd element will immediately follow the dt on each line, regardless of their individual lengths.

To achieve vertical centering of the content within the <dt> tag in relation to the content within the <dd> tag, I utilized a combination of display: inline-block and vertical-align: middle.

For a comprehensive example, check out the Codepen link below:

.dl-horizontal {
  font-size: 0;
  text-align: center;

  dt, dd {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    width: calc(50% - 10px);
  }

  dt {
    text-align: right;
    padding-right: 10px;
  }

  dd {
    font-size: 18px;
    text-align: left;
    padding-left: 10px;
  } 
}

Here is a CSS code snippet that can be used to display content as a table-like structure with borders and responsiveness:

 dl { 
        display: block;
        border: 2px solid black;
        margin: 1em;
    }  
 dt {
        display: inline-block;
        width: 3em;
        word-wrap: break-word;
    } 
 dd {
        margin-left: 0;
        display: inline;
        vertical-align: top;
        line-height: 1.3;
    } 
 dd:after {
        content: '';
        display: block; 
    } 

A comparison between using <table> and <dl> for similar structured content:

<!DOCTYPE html>
<html>
<style>

dl {
        display: block;
        border: 2px outset black;
        margin: 1em;
        line-height: 18px;
    }  
dt {
        display: inline-block;
        width: 3em;
        word-wrap: break-word;
    }

dd {
        margin-left: 0;
        display: inline;
        vertical-align: top;
        line-height: 1.3;
    }
dd:after {
        content: '';
        display: block;
    }

.glosstable {
        border: 2px outset #aaaaaa;
        margin: 1em;
        text-align: left;
}
.glosstable,
table,
tbody,
tr,
td,
dl,
dt {
        font-size: 100%;
        line-height: 18px;
}

.glossaz {
        font-size: 140%;
        padding-left: 2em;
        font-weight: bold;
        color: #00838c;
}
td.first {
        width: 2.5em;
}
</style>
<body>
Table<br>
<table class="glosstable">
<tr><td class="first">Milk</td>
<td class="glossdata">Black hot drink</td>
</tr>
<tr><td class="first">Coffee2</td>
<td class="glossdata">Black hot drink</td>
</tr>
<tr><td>Warm milk</td>
<td class="glossdata">White hot drink</td>
</tr>
</table>
DL list <br>
<dl class="glosstablep">
<dt>Milk</dt>
<dd class="glossdata">White cold drink</dd>
<dt>Coffee2</dt>
<dd class="glossdata">Black cold drink</dd>
<dt>Warm Milk</dt>
<dd class="glossdata">White hot drink</dd>
</dl>

</body>
</html>

Check out this potential solution using flex in SCSS:

ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  li {
    width: 150px;
  }
  p {
    margin: 0;
    flex: 1 0 calc(100% - 150px);
  }
}

This code snippet is designed for the following Pug HTML structure:

ul
  li item 1
  p desc 1
  li item 2
  p desc 2

I have discovered a solution that appears to be ideal, but it necessitates the use of additional <div> elements. Interestingly, instead of relying on the traditional <table> tag for alignment purposes, one can achieve the desired layout by employing the display:table-row; and display:table-cell; styles:

<style type="text/css">
dl > div {
  display: table-row;
}
dl > div > dt {
  display: table-cell;
  background: #ff0;
}
dl > div > dd {
  display: table-cell;
  padding-left: 1em;
  background: #0ff;
}
</style>

<dl>
  <div>
    <dt>Mercury</dt>
    <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
  </div>
  <div>
    <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>
  </div>
  <div>
    <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>
  </div>
</dl>

When styling the dt and dd elements, an issue may arise: ensuring they have equal height. This becomes especially tricky if you intend to add a visible border at the bottom of these elements, requiring them to align perfectly like in a table.

One workaround is to structure each row as a "dl" element. (similar to using tr in a table) While this approach sacrifices some of the original essence of definition lists, it provides a simple method to create pseudo-tables that are both efficient and aesthetically pleasing.

THE CSS:

dl {
 margin:0;
 padding:0;
 clear:both;
 overflow:hidden;
}
dt {
 margin:0;
 padding:0;
 float:left;
 width:28%;
 list-style-type:bullet;
}
dd {
 margin:0;
 padding:0;
 float:right;
 width:72%;
}

.huitCinqPts dl dt, .huitCinqPts dl dd {font-size:11.3px;}
.bord_inf_gc dl {padding-top:0.23em;padding-bottom:0.5em;border-bottom:1px solid #aaa;}

THE HTML:

<div class="huitCinqPts bord_inf_gc">
  <dl><dt>Term1</dt><dd>Definition1</dd></dl>
  <dl><dt>Term2</dt><dd>Definition2</dd></dl>
</div>

In my recent project, I faced the challenge of combining inline and non-inline dt/dd pairs. To achieve this, I utilized the class dl-inline on <dt> elements to indicate that they should be followed by inline <dd> elements.

dt.dl-inline {
  display: inline;
}
dt.dl-inline:before {
  content:"";
  display:block;
}
dt.dl-inline + dd {
  display: inline;
  margin-left: 0.5em;
  clear:right;
}

<dl>
    <dt>The first term.</dt>
    <dd>Definition of the first term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
    <dt class="dl-inline">The second term.</dt>
    <dd>Definition of the second term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
    <dt class="dl-inline">The third term.</dt>
    <dd>Definition of the third term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
    <dt>The fourth term</dt>
    <dd>Definition of the fourth term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
</dl

>

This code snippet is compatible with IE7 and newer versions, adheres to web standards, and allows for varying heights.

<style>
dt {
    float: left;
    clear: left;
    width: 100px;        
    padding: 5px 0;
    margin:0;
}
dd {
    float: left;
    width: 200px;
    padding: 5px 0;
    margin:0;
}
.cf:after {
    content:'';
    display:table;
    clear:both;
}
</style>

<dl class="cf">
    <dt>A</dt>
    <dd>Apple</dd>
    <dt>B</dt>
    <dd>Banana<br>Bread<br>Bun</dd>
    <dt>C</dt>
    <dd>Cinnamon</dd>
</dl>        

Check out the JSFiddle demo.

In my scenario, I simply needed to insert a line break after every dd element.

For example, I wanted to format this:

<dl class="p">
  <dt>Created</dt> <dd><time>2021-02-03T14:23:43.073Z</time></dd>
  <dt>Updated</dt> <dd><time>2021-02-03T14:44:15.929Z</time></dd>
</p>

to resemble the default style of this:

<p>
  <span>Created</span> <time>2021-02-03T14:23:43.073Z</time><br>
  <span>Updated</span> <time>2021-02-03T14:44:15.929Z</time>
</p>

which appears like this:

Created 2021-02-03T14:23:43.073Z
Updated 2021-02-03T14:44:15.929Z

To achieve this, I utilized the following CSS:

dl.p > dt {
  display: inline;
}

dl.p > dd {
  display: inline;
  margin: 0;
}

dl.p > dd::after {
  content: "\A";
  white-space: pre;
}

Alternatively, you could implement this CSS:

dl.p > dt {
  float: left;
  margin-inline-end: 0.26em;
}

dl.p > dd {
  margin: 0;
}

I also introduced a colon after each dt element with the help of this CSS:

dl.p > dt::after {
  content: ":";
}

I encountered a similar issue where I needed the definition to appear on the same line unless it overflowed, in which case it should move to a new line. After experimenting with different solutions, I came across a surprisingly simple fix using floats.

<html>
    <style>
        dl.definitions, dl.definitions dt, dl.definitions dd {
            display: block;
        }
        dl.definitions dt {
            float: left;
            clear: right;
            margin-inline-end: 2ch;
        }
        dl.definitions dd {
            float: right;
            margin-inline-start: unset;
            --definition-indent: 15ch;
            width: calc(100% - var(--definition-indent));
        }
    </style>

    <dl class="definitions">
        <dt> Example Term
        <dt> Another Term
        <dd>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
            ut aliquip ex ea commodo consequat.....
    </dl>
</html>

Check out the solution I came up with. It's working perfectly! ✨

ul {
    display: inline-block;

    &::before {
        content: " ";
        display: table;
    }

    &::after {
        clear: both;
    }

    li {
        margin-right: 5px;
        display: inline-block;
        float: left;
        clear: left;
    }

    p {
        display: inline-block;
        float: left;
        padding-left: 0;
        margin-left: 0;
    }
}

My go-to approach for styling definition lists as tables usually involves the following:

dt,
dd{
    /* Resetting browser defaults */
    display: inline;
    margin: 0;
}

dt  {
    clear:left;
    float:left;
    line-height:1; /* Customize this value based on your needs */
    width:33%; /* Set to one third of parent width or adjust as necessary */
}

dd {
    clear:right;
    float: right;
    line-height:1; /* Customize this value based on your needs */
    width:67%; /* Set to two thirds of parent width or adjust as necessary */
}