responsive 2

HTML

<div class="container">
  
  <section>
    This is supposed to be a section
  </section>
  <aside>
    This is supposed to be aside
    
  </aside>
  <div class="clearfix"></div>
  </div>
</div>

CSS

body,html {
   height: 100%;
}

.container{
  width: 100%;
  padding: 5% 0 ;
  background: red;
  height: 25%;
}

.container::before,
.container::after{
  content: "";
  display: table;
  
}

.container::after{
  clear: both;
}

section{
  float:left;
  width: 40%;
  height: 100%;
  display: block;
}

aside{
  float:right;
  display: inline-block;
  vertical-align: top;
  width: 40%;
  height: 80%;
}

section, aside{
  background: green;
  border-radius: 6px;
  margin: 0 5%;
}

.clearfix { display:table; clear:both;}