Horizontally align divs

HTML

<div id="start" class="side left">
    <span>left</span>
</div>
<div id="end" class="side right">
    <span>right</span>
</div>

CSS

body {
  display: flex;
  margin: 0;
  padding: 0;
}

.side {
  height: 100px;
  flex: 0 1 400px;
}

.left{ background-color: red;}
.right{ background-color: blue;}


span {
 text-align: center;
  display: block;
  margin: 3px auto;
}

@media(max-width: 800px) {
  body {
    flex-wrap: wrap;
  }
  
  .left {
    order: 2;
  }
}