Answers for "align dt and dd in one line with flexbox"

0

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>
Posted by: Guest on October-11-2021

Browse Popular Code Answers by Language