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 }
  dl { display: table-row;}
  dt, dd {
    padding: .5em;
    display: table-cell;
  }

  dt { font-weight: bold; white-space: nowrap; text-align: right; }
</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>