JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <section class="clear">
    <div class="outer">
      <div class="inner">1</div>
    </div>
    <div class="outer">
      <div class="inner">2</div>
    </div>
    <div class="outer">
      <div class="inner">3</div>
    </div>
    <div class="outer">
      <div class="inner">4</div>
    </div>
    <div class="outer">
      <div class="inner">5</div>
    </div>
  </section>
</div>

CSS

body {
  margin: 0;
}

.clear:after {
  content: "";
  display: table;
  clear: both;
}



#container {
  width: 600px;
  margin: 0 auto;
  padding: 50px 0;
  border: 1px solid black;
}

  section {
    margin: 0 -5px;
  }

    .outer {
      -moz-box-sizing: border-box;
           box-sizing: border-box;
      float: left;
      width: 20%;
      padding: 0 5px;
    }

      .inner {
        font: 20px/1 Arial, sans-serif;
        line-height: 100px;
        text-align: center;
        background: steelblue;
      }