JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fwrapper">
  <div class="fbox pnbox">1</div>
  <div class="fbox pnbox">2 this is a lot of text2 this is a lot of text 2 this is a lot of text 2 this is a lot of text 2 this is a lot of text 2 this is a lot of text 2 this is a lot of text 2 this is a lot of text t </div>
  <div class="fbox pnbox">3</div>
  <div class="fbox pnbox">4</div>
</div>

CSS

.fwrapper {
  display: flex;
  xjustify-content: space-around;
  justify-content: flex-start;
  background: #eee;
}

.fbox {
  width: 100%;
  padding: 1%;
  margin: 1%;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

@media only screen and (max-width: 600px) {
  .fwrapper {
    display: block;
  }
  .fbox {
    width: inherit;
    margin: .6em;
  }
}

.pnbox {
  background: #ccc;
  border: 1px solid black;
  box-shadow: 4px 4px 4px #999;
  border-radius: 5px;
}