JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" class="clearfix">
    <div class="sep">1</div>
    <div class="sep">2</div>
    <div class="sep">3</div>
    <div class="sep">4</div>
    <div class="sep">5</div>
</div>

CSS

.sep{
    border:1px solid red;
    height: 50px;
    width: 280px;
    margin: 10px;
}
#container{
    min-height: 170px;
    width: 300px;
    border:1px solid green;
    padding:10px;
}

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  zoom: 1;
}