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;
  }
  
  div { display: table; }
  dl { display: table-row; }
  dt { display: table-cell; white-space: nowrap; font-weight: 700; text-align: right; }
  dd { display: table-cell; }
</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>