JSFiddle - React, Tailwind, and code Playground

HTML

<div id="blogPosts">
    <div class="blog">1Content</div>
    <div class="blog">2Content</div>
    <div class="blog">3Content</div>
    <div class="blog">4Content</div>
    <div class="blog">5Content</div>
    <div class="blog">6Content</div>
</div>

CSS

#blogPosts {
   display: block;
   display: -webkit-flex;
   display: -moz-flex;
   display: flex;
   -webkit-align-items: left;
   -webkit-moz-items: left;
   align-items: left;
   -webkit-justify-content: left;
   -moz-justify-content: left;
   justify-content: left;
   -webkit-flex-direction: row;
   -moz-flex-direction: row;
   flex-direction: row;
   -webkit-flex-wrap: wrap;
   -moz-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-flex-flow: row wrap;
   -moz-flex-flow: row wrap;
   flex-flow: row wrap;
   -webkit-align-content: flex-end;
   -moz-align-content: flex-end;
   align-content: flex-end;
}
.blog {
    display: inline-block;
    display: box;
    width: 33.3%;
}