JSFiddle - React, Tailwind, and code Playground

HTML

<div id="flexbox-container">
  <div class="inner-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid nemo iste molestiae optio quisquam beatae, a earum modi voluptas expedita? Magnam optio provident sapiente, libero quasi, natus voluptatum hic repellendus.</div>
  <div class="inner-content">Little texte</div>
  <div class="inner-content"></div>
  <div class="inner-content"></div>
  <div class="inner-content"></div>
  <div class="inner-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non nulla ex, architecto sapiente dolorum veniam.</div>
  <div class="inner-content"></div>
  <div class="inner-content"></div>
  <div class="inner-content"></div>
  <div class="inner-content"></div>
  <div class="inner-content"></div>
  <div class="inner-content"></div>
  <div class="inner-content"></div>
  <div class="inner-content"></div>
  <div class="inner-content"></div>
  <div class="inner-content"></div>
</div>

CSS

#flexbox-container {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  /*height: 100px;*/
  width: 400px;
  border: 1px solid black;
}

.inner-content {
  transform-origin: left;
  /*transform: scale(1.5, 1);*/
  background: grey;
  border: 1px solid red;
  min-height: 98px;
  min-width: 98px;
  max-width: 298px;
  flex-grow:3;
  /* 98px since the border gets added around resulting in 100px */
  opacity: 0.5;
}