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{
    font-weight:bold;
    white-space:nowrap;
  }
 
  dt, dd {
    display:table-cell;
    padding: .5em;
  }
</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>