challenge.md

CSS Challenge #2

You start with this:

And must end up with this:

You may add as many CSS selectors and rules as you like, but can’t add any px, em or % value.

Fork and edit start.html to show your solution! :)

start.html

<style>
  body { margin: auto; padding: 40px; font: 16px Helvetica Neue; max-width: 500px }

  dt, dd {
    padding: .5em;
    display: table-cell;
  }

  dl {
    display: table-row;
  }

  dt {
    text-align: right;
    font-weight: bold;
    white-space: pre;
  }
</style>

<div>
  <dl>
    <dt>Lorem ipsum</dt>
    <dd>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
  </dl>
  <dl>
    <dt>Dolor sit amet</dt>
    <dd>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
  </dl>
  <dl>
    <dt>Consectetur</dt>
    <dd>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</dd>
  </dl>
  <dl>
    <dt>Adipisicing elit</dt>
    <dd>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</dd>
  </dl>
</div>