JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<div class="q1">
  <div class="q2">
    <p></p>
    <p></p>
    <p></p>
  </div>
</div>

<div class="q1">
  <div class="q3">
    <p></p>
    <p></p>
    <p></p>
  </div>
</div>

SCSS

* {
  margin: 0;
  padding: 0;
}

.q1 {
//  height: 400px;
  border: 1px black solid;
  text-align: center;
  
  &:before,
  &:after {
    display: table;
    width: 100%;
    
    content: '';
  }
  
  & + .q1 {
    margin-top: 20px;
  }
}

p {
  vertical-align: top;
  display: inline-block;
  width: 100px;
  height: 50px;
  background: black;
}

.q2 {
  display: inline-block;
  border: 1px dashed blue;
}

.q3 {
  float: left;
  border: 1px green dashed;
}