How to put DT on the same line as its DD with CSS

When using the definition list “dl” tag, dt and dd are usually displayed on two lines.

How it looks when you describe the dl element normally below

name: xxxxxxxxxxxx
mail: xxxxxxxxxxxx
tel: xxxxxxxxxxxx

code

<dl>
    <dt>name</dt>
    <dd>xxxxxxxxxxxx</dd>
    <dt>mail</dt>
    <dd>xxxxxxxxxxxx</dd>
    <dt>tel</dt>
    <dd>xxxxxxxxxxxx</dd>
</dl>

I will introduce the method when you want to display it side by side (inline).

CSS that puts dt and dd side by side

Display with the style of the code below

name: xxxxxxxxxxxx
mail: xxxxxxxxxxxx
tel: xxxxxxxxxxxx

code

// html
<dl class="dl-inline">
    <dt>name</dt>
    <dd>xxxxxxxxxxxx</dd>
    <dt>mail</dt>
    <dd>xxxxxxxxxxxx</dd>
    <dt>tel</dt>
    <dd>xxxxxxxxxxxx</dd>
</dl>

// CSS
.dl-inline dt {
  float: left;
  clear: left;
  margin-right: 10px;
}
.dl-inline dd {
  margin-left: 0px;
}

In the above case, the bold of dt is off, so adjust it with font-weight if necessary.
Also, if you want to make the width of dt uniform, you can specify the width for dt.

name: xxxxxxxxxxxx
mail: xxxxxxxxxxxx
tel: xxxxxxxxxxxx

code

// html
<dl class="dl-inline same-width">
    <dt>name</dt>
    <dd>xxxxxxxxxxxx</dd>
    <dt>mail</dt>
    <dd>xxxxxxxxxxxx</dd>
    <dt>tel</dt>
    <dd>xxxxxxxxxxxx</dd>
</dl>
// CSS
.dl-inline dt {
    float: left;
    clear: left;
    margin-right: 10px;
}
.dl-inline dd {
    margin-left: 0px;
}
.dl-inline.same-width dt {
    width: 120px;
}