Web Standards: HTML & CSS

descriptive.css

<style>
.article {
  overflow: hidden;
  display: -webkit-flex;
  display: flex;
  width: 800px;
  margin: 0 auto;
  align-items: center;
}
</style>

descriptive.html

<div class="pageItems">
  <div class="pageContent">Content 1</div>
  <div class="pageSide">Content 2</div>
</div>

id-class.html

<article id="comment-1" class="comment featured">Comment</article>
<article id="comment-2" class="comment">Comment</article>

presentational.css

<style>
.row {
  overflow: hidden;
}
.flex {
  display: -webkit-flex;
  display: flex;
}
.center-block {
  width: 800px;
  margin: 0 auto;
}
.flex-center {
  align-items: center;
}
</style>

presentational.html

<div class="row flex center-block flex-center">
  <div class="col-md-8">Content 1</div>
  <div class="col-md-4">Content 2</div>
</div>