JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">


  <div class="sections__container">
    
    	<div class="sections__container__a">A-1</div>
    	<div class="sections__container__b">A-2</div>
      <div class="sections__container__c">A-3</div>
    
    	<div class="sections__container__a">B-1</div>
    	<div class="sections__container__b">B-2</div>
      <div class="sections__container__c">B-3</div>
    
    </div>


</div>

CSS

#container{
  width:600px;
  margin: 0 auto;
  background-color:#ececec;
  padding:10px;
  margin-bottom:30px;
}

.sections__container {
    margin: 0 auto;
    max-width: 600px;
    display: flex;
}

.sections__container__a {
    margin-right: 5px;
    width: 33.33%;
    height: 100%;
    float: left;
    border-radius: 4px;
    flex-grow: 1;
    background-color: #FFFFFF;
    font-size: 0.80rem;
    padding: 15px 0px 10px 0px;
    font-weight: 600;
    margin-bottom:10px;
    text-align: center;
}
.sections__container__b {
    margin:0 5px;
    width: 33.33%;
    height: 100%;
    float: left;
    border-radius: 4px;
    flex-grow: 1;
    background-color: #FFFFFF;
    font-size: 0.80rem;
    padding: 15px 0px 10px 0px;
    font-weight: 600;
    margin-bottom:10px;
    text-align: center;
}
.sections__container__c {
    margin-left: 5px;
    width: 33.33%;
    height: 100%;
    float: left;
    border-radius: 4px;
    flex-grow: 1;
    background-color: #FFFFFF;
    font-size: 0.80rem;
    padding: 15px 0px 10px 0px;
    font-weight: 600;
    margin-bottom:10px;
    text-align: center;
}