JSFiddle - React, Tailwind, and code Playground

by winchendonsprings

HTML

<div class="parent">
 <div class="child-a">abc</div>
 <div class="child-b">def</div>
 <div class="child-c">ghi</div>
 <div class="child-d">jkl</div>
 <div class="child-e">mno</div>
 <div class="child-f">pqr</div>
 <div class="child-g">stu</div>
</div>

CSS

.child-a, .child-b, .child-c {
  padding: 0 2% 0 0;
  width:100%
  display: inline;
  float: left;
    
  border:solid 1px silver;
  padding:4px;
  margin:4px;
 }
.child-d, .child-e, .child-f {
    
  display: block;
  padding: 0 2% 0 0 ;
    ?
}