Q:

dt/dd in same row alterates on line break

I have an listing build with dt/dd which shows key/value pairs in one line.
If the key is to long it will cause a line break, resulting in a wrong start of the next key:

This is my code:

dl {
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0
}
dt {
  float: left;
  width: 150px;
  padding: 0;
  margin: 0
}
dd {
  float: left;
  padding: 0;
  margin: 0
}
.attributelist-striped .attributelist--key:nth-of-type(odd), .attributelist-striped .attributelist--value:nth-of-type(odd) {
    background-color: #f0f0f0;
}
.attributelist-striped .attributelist--key, .attributelist-striped .attributelist--value {
    padding: 5px;
}
<section>
    <dl class="attributelist-striped">
        <dt class="attributelist--key">Matterial Armband:</dt>
        <dd class="attributelist--value">Gold/Stahl</dd>
        <dt class="attributelist--key">Matterial Gehäuse:</dt>
        <dd class="attributelist--value">Gelbgold mit Stahl</dd>
     </dl>
</section>

How can this be improved?
*edit to illustrate change based on answer of @Johannes *

A:

In the past it wasn't valid, but now you can wrap dd/dt key/value pairs in a div, which will let you clear those floats and simplify your CSS. Because the divs are block elements, the alternating background color for each row will be more uniform.

dl {
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0
}
dt {
    float: left;
    width: 150px;
    padding: 0;
    margin: 0
}
dd {
    float: left;
    padding: 0;
    margin: 0
}
.attributelist-striped > div:nth-child(odd) {
    background-color: #f0f0f0;
}
.attributelist-striped .attributelist--key,
.attributelist-striped .attributelist--value {
    padding: 5px;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
<section>
    <dl class="attributelist-striped">
        <div class="clearfix">
            <dt class="attributelist--key">Matterial Armband:</dt>
            <dd class="attributelist--value">Gold/Stahl</dd>
        </div>
        <div class="clearfix">
            <dt class="attributelist--key">Matterial Gehäuse:</dt>
            <dd class="attributelist--value">Gelbgold mit Stahl</dd>
        </div>
        <div class="clearfix">
            <dt class="attributelist--key">Matterial Armband:</dt>
            <dd class="attributelist--value">Gold/Stahl</dd>
        </div>
        <div class="clearfix">
            <dt class="attributelist--key">Matterial Gehäuse:</dt>
            <dd class="attributelist--value">Gelbgold mit Stahl</dd>
        </div>
     </dl>
</section>

