JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div data-small="T" data-med="Toys" data-big="Toys Stuff" class="inline"></div>
  <div data-small="T" data-med="Toys" data-big="Toys Stuff" class="inline"></div>
  <div data-small="T" data-med="Toys" data-big="Toys Stuff" class="inline"></div>
  <div data-small="T" data-med="Toys" data-big="Toys Stuff" class="inline"></div>
  <div data-small="T" data-med="Toys" data-big="Toys Stuff" class="inline"></div>  <div data-small="T" data-med="Toys" data-big="Toys Stuff" class="inline"></div>
  <div data-small="T" data-med="Toys" data-big="Toys Stuff" class="inline"></div>
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  padding: 20px;
}

.parent {}

.inline {
  border: 1px solid black;
  display: inline-block;
  min-width: 50px;
  position: relative;
  padding:5px 10px;
}

.inline:after {
  content: attr(data-big);
  display: block;
  text-align: center;
 
}

@media(max-width:768px) {
  .inline:after {
    content: attr(data-med);
  }
}

@media(max-width:500px) {
  .inline:after {
    content: attr(data-small);
  }
}