alexhsamuel/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Side-by-side definition list</title>
<style id="jsbin-css">
/*
* {
  border: 1px solid red;
}
*/

body {
  margin: 1em;
  background: white;
  font-family: sans-serif;
}

dl {
  border: 2px solid #b0b0b0;
  padding: 1ex;
  margin: 0;
}

dt {
  background: #fafaff;
  font-weight: 700;
  padding: 0 1em 0 0;
  margin: 0;
  float: left;
}

dd {
  background: #f8fff8;
  font-weight: 300;
  margin: 0 0 1em 6em;
}

p {
  margin: 0;
}

ul {
  margin: 0;
}

div {
  margin: 0;
  padding: 0;
}
</style>
</head>
<body>
<dl>
  <dt>term 1</dt>
  <dd>This is the first definition.</dd>

  <dt>a substantially longer term</dt>
  <dd>This is the second definition.  It extends onto multiple lines in the render.</dd>

  <dt>term 2</dt>
  <dd>This is the second definition.  It
    is substantially longer than the first
    definition.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </dd>

  <dt>term 3</dt>
  <dd>
    <div>
      <p>This is one has structure.</p>
      <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
      </ul>
    </div>
  </dd>

  <dt>term 4</dt>
  <dd style="background: none;">
    <div>
      <dl>
        <dt>subterm 1</dt>
        <dd>And its definition definition definition.</dd>

        <dt>subterm 2</dt>
        <dd>And its definition.</dd>
      </dl>
    </div>
  </dd>

</dl>


<script id="jsbin-source-css" type="text/css">
/*
* {
  border: 1px solid red;
}
*/

body {
  margin: 1em;
  background: white;
  font-family: sans-serif;
}

dl {
  border: 2px solid #b0b0b0;
  padding: 1ex;
  margin: 0;
}

dt {
  background: #fafaff;
  font-weight: 700;
  padding: 0 1em 0 0;
  margin: 0;
  float: left;
}

dd {
  background: #f8fff8;
  font-weight: 300;
  margin: 0 0 1em 6em;
}

p {
  margin: 0;
}

ul {
  margin: 0;
}

div {
  margin: 0;
  padding: 0;
}
</script>
</body>
</html>

## jsbin.juzegew.css
/*
* {
  border: 1px solid red;
}
*/

body {
  margin: 1em;
  background: white;
  font-family: sans-serif;
}

dl {
  border: 2px solid #b0b0b0;
  padding: 1ex;
  margin: 0;
}

dt {
  background: #fafaff;
  font-weight: 700;
  padding: 0 1em 0 0;
  margin: 0;
  float: left;
}

dd {
  background: #f8fff8;
  font-weight: 300;
  margin: 0 0 1em 6em;
}

p {
  margin: 0;
}

ul {
  margin: 0;
}

div {
  margin: 0;
  padding: 0;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Side-by-side definition list</title>
	<style id="jsbin-css">
	/*
	* {
	border: 1px solid red;
	}
	*/

	body {
	margin: 1em;
	background: white;
	font-family: sans-serif;
	}

	dl {
	border: 2px solid #b0b0b0;
	padding: 1ex;
	margin: 0;
	}

	dt {
	background: #fafaff;
	font-weight: 700;
	padding: 0 1em 0 0;
	margin: 0;
	float: left;
	}

	dd {
	background: #f8fff8;
	font-weight: 300;
	margin: 0 0 1em 6em;
	}

	p {
	margin: 0;
	}

	ul {
	margin: 0;
	}

	div {
	margin: 0;
	padding: 0;
	}
	</style>
	</head>
	<body>
	<dl>
	<dt>term 1</dt>
	<dd>This is the first definition.</dd>

	<dt>a substantially longer term</dt>
	<dd>This is the second definition. It extends onto multiple lines in the render.</dd>

	<dt>term 2</dt>
	<dd>This is the second definition. It
	is substantially longer than the first
	definition. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
	</dd>

	<dt>term 3</dt>
	<dd>
	<div>
	<p>This is one has structure.</p>
	<ul>
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
	</ul>
	</div>
	</dd>

	<dt>term 4</dt>
	<dd style="background: none;">
	<div>
	<dl>
	<dt>subterm 1</dt>
	<dd>And its definition definition definition.</dd>

	<dt>subterm 2</dt>
	<dd>And its definition.</dd>
	</dl>
	</div>
	</dd>

	</dl>


	<script id="jsbin-source-css" type="text/css">
	/*
	* {
	border: 1px solid red;
	}
	*/

	body {
	margin: 1em;
	background: white;
	font-family: sans-serif;
	}

	dl {
	border: 2px solid #b0b0b0;
	padding: 1ex;
	margin: 0;
	}

	dt {
	background: #fafaff;
	font-weight: 700;
	padding: 0 1em 0 0;
	margin: 0;
	float: left;
	}

	dd {
	background: #f8fff8;
	font-weight: 300;
	margin: 0 0 1em 6em;
	}

	p {
	margin: 0;
	}

	ul {
	margin: 0;
	}

	div {
	margin: 0;
	padding: 0;
	}
	</script>
	</body>
	</html>