JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div class="dt w-100">
  <div class="dtc tac">
    <div class="box"></div>
  </div>
  <div class="dtc vam tac ph-lg pv-lg">
    til
  </div>
  <div class="dtc tac">
    <div class="box"></div>
  </div>
</div>

CSS

.box {
  display: inline-block;
  height: 10rem;
  width: 10rem;
  background-color: dodgerblue;
}
.vam {
  vertical-align: middle;
}
.tac {
  text-align: center;
}
.ph-lg {
  padding-right: 4rem;
  padding-left: 4rem;
}
.pv-lg {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.w-100 {
  width: 100%;
}
@media screen and (min-width: 30rem) {
  .dt {
    display: table;
  } 
  .dtc {
    display: table-cell;
  }
}