JSFiddle - React, Tailwind, and code Playground

by davidxmartins

HTML

<div class="container">
    <div class="item">Element 1</div>
    <div class="item">Element 2</div>
    <div class="item">Element 3</div>
</div>

CSS

.container {
 (irrelevant styles)
}

.item {
  float: left;
  background: lightgrey;
  text-align: center;
  width: 33.3%;
}

@media (max-width: 700px) {
  .item:first-child, .item:nth-child(2) {
    width: 50%;
  }

  .item:nth-child(3) {
    width: 100%;
  }
}