JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flexbox">
  <div class="flex-item">
    <p>Content</p>
  </div>
  <div class="flex-item">
    <p>Content</p>
  </div>
  <div class="flex-item">
    <p>Content</p>
  </div>
  <div class="flex-item">
      <p ><button id="add">Add Content on Click</button></p>
  </div>
  <div class="flex-item">
    <p>Content</p>
  </div>
  <div class="flex-item">
    <p>Content</p>
  </div>
  <div class="flex-item">
    <p>Whole lot of content 
      Whole lot of content 
      Whole lot of content 
      Whole lot of content 
      Whole lot of content
        Whole lot of content 
      Whole lot of content  Whole lot of content 
      Whole lot of content  Whole lot of content 
      Whole lot of contentContent</p>
  </div>
  <div class="flex-item">
    <p>Content</p>
  </div>

  
</div>

CSS

.flexbox{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;  
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}
.flex-item{
  
  flex:1;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;  
}
.flex-item p{
  margin: 10px 5px;
  padding: 10px;
  background:yellow;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
#add{
    padding:5px;
    background:red;
}
.added-content{
    background:blue;
    margin-bottom:5px;
    color:white;
}
.breakpoint{
  display:none;
}

@media all and (max-width: 1201px){
  .flex-item{
      flex: none;
      width:25%;
  }
}

@media all and (max-width: 601px){
  .flex-item{
      flex: none;
      width:50%;
  }
}

@media all and (max-width: 401px){
  .flex-item{
      flex: none;
      width:100%;
  }
}

JavaScript

$("#add").on("click",function(){
   	$(this).parent().prepend('<div class="added-content" >Added Content </div>');
});