Проблема с адаптивным дизайном

* { 
  box-sizing:border-box; 
} 
 
html, 
body { 
  padding: 0; 
  margin: 0; 
} 
 
 
main { 
  background: #0084ff; 
  height: 300px; 
  float:left; 
  width:calc(100% - 300px); 
} 
 
aside { 
  background: #00ffa8; 
  height: 300px; 
  float: right; 
  width: 300px; 
} 
 
@media (max-width: 500px) { 
  aside, 
  main{ 
    width: 100%; 
    float:none; 
  } 
}

<main>main</main> 
<aside>aside</aside>

* { 
  box-sizing:border-box; 
} 
 
html, 
body { 
  padding: 0; 
  margin: 0; 
} 
 
 
main { 
  background: #0084ff; 
  height: 300px; 
  display: table-cell; 
} 
 
aside { 
  background: #00ffa8; 
  height: 300px; 
  width: 300px; 
   
  display: table-cell; 
} 
 
.wrap { 
  display: table; 
  table-layout:fixed; 
  width: 100%; 
} 
 
@media (max-width: 500px) { 
   
  .wrap, 
  aside, 
  main{ 
    width: 100%; 
    display: block; 
  } 
}

<div class="wrap"> 
  <main>main</main> 
  <aside>aside</aside> 
</div>