JSFiddle - React, Tailwind, and code Playground

by Ying Chor Ding

HTML

<div class="container">
  <div class="section one">1</div>
  <div class="section two">2</div>
  <div class="section three">3</div>
</div>

CSS

.container {
  font-size: 0; /*remove white space*/
}

.section {
  font-size: 16px; /*reset font size*/
  display: inline-block;
  vertical-align: top;
  border: 1px solid;
  box-sizing: border-box;
}
.one {
  width: 35%;
}
.two {
  width: 30%;
}
.three {
  width: 35%;
}

@media (max-width: 768px) { /*breakpoint*/
  .section {
    display: block;
    width: auto;
  }
}