JSFiddle - React, Tailwind, and code Playground

Flex-Box

by Murat Kezli

HTML

<div class="flexbox">
  <div class="box-6">
  <div class="content">
  
    <h3>Great</h3><p>Ok this Lorem will be the shortest 
    <br> <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, ad?</p>
  </div>
 

  </div>
  
<div class="box-6">
<div class="content">
    <h3>Great</h3><p>Ok this Lorem will be the shortest 
    <br> <br> Lorem ipsum dolor sit amet, consectetur adipisicing <br>wewew<br>qweqe qwe qweqw werwrwervewvewrvwer ewr ewr ewr ewr ewr wer ewr we r rew rwerw rwer r ewr ewr ew rew re we w wer e r ewrw eqw e qwe qw eqw eqw eq we qw eqw e qwe wq eqw eqw eqw <br>elit. A, ad?</p>
  </div>

  </div>
  
  
 
</div>

CSS

.flexbox {margin:auto;
  width:100%;
  max-width:300px !important;
  max-width:1100px !important;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
.box-6 {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  flex: 1 0 200px; /* Play with this value */
  margin: 5px;  background-color:red;
}
.box-6 .content {
  padding: 25px;
  flex: 1; /* <-- this makes all the difference */
  
}
.button {
  /* nothing here -_- */
  width:100%;
  height:40px;
  line-height:40px;
  text-align:center;
  background-color:blue; cursor:pointer;}