Align two Block elements

by Thomas Orthbandt

HTML

<div class="page">
  <div class="header">
    <h2>Knowledge is power</h2>
  </div>
  <div class="container">
    <div class="content">
      <div class="main">
        <p>Hard stop staff engagement, but proceduralize. Get all your ducks in a row good optics new economy nor locked and loaded, nor baseline the procedure and samepage your department, yet quick-win. Core competencies work.</p> 
        <p>Deploy execute what do you feel you would bring to the table if you were hired for this position. We just need to put these last issues to bed put your feelers out back of the net.</p>
      </div>
      <div class="aside">
        <ul class="list">
          <li class="list-item">re-inventing the wheel</li>
          <li class="list-item">no scraps hit the floor</li>
          <li class="list-item">fire up your browser</li>
          <li class="list-item">can we take this offline</li>
          <li class="list-item">we don't want to boil the ocean</li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS

html,
body {
  font-size: 1em;  
  font-family: sans-serif;
  margin: 0px;
}

.page {
  background: #252525;
}

.header {
  background: #9ACACC;
  font-size: 2.5em;
  padding: 30px 20px;
  text-align: center;
}

.container {
  background: #CCAC9C;
  width: 80%;
  margin: 0 auto;
  padding: 0;
}

.content {
  padding: 30px 20px;
  display: inline-block;
}

.main {
  //padding-right: 20px;
  width: 66%;
  display: inline-block;
  float:left;
}

.aside {
  background: #F6F6F6;
  padding: 20px;
  width: 25%;
  display: inline-block;
  float: right;
}

ul {
  padding-left: 20px;
  margin: 0px;
}