align dt and dd in one 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>