JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="wrapper">
  <div class="flex-box">

    <div class="grid-item">
      <div class="flex-item wishlist-item">
        <div>Add to wishlist</div>
      </div>
      <div class="flex-item name">
        <div>Qtlxy-name Qtlxy-name Qtlxy-name</div>
      </div>
      <div class="flex-item long-name">
        <div>
          Qtlxy-G3-V2-112-Qtlxy-G3-V2-112-1
        </div>
      </div>
      <div class="flex-item desc">
        <div>
          <span>
            This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ? 
                    </span>
        </div>
      </div>
      <div class="flex-item price-item">
        <div class="before-price">
          Price
        </div>
      </div>
      <div class="flex-item price-item">
        <div class="price">
          $567.00
        </div>
      </div>
      <div class="flex-item button-item">
        <button class="btn">
          Try It
        </button>
      </div>

      <div class="flex-item wishlist-item">
        <div>Add to wishlist
        </div>
      </div>
      <div class="flex-item name">
        <div>Qtlxy-name Qtlxy-name Qtlxy-name This can be pretty long 2 can it expand/shrink depending on CONTENT ?
        </div>
      </div>
      <div class="flex-item long-name">
        <div class="product-sku">
          Qtlxy-G3-V2-112-Qtlxy-G3-V2-112-1
        </div>
      </div>
      <div class="flex-item desc">
        <div>
          <span>
   As well as it can be short
                    </span>
        </div>
      </div>
 ...

CSS

.wrapper {
  width: 1000px;
  background: #7BB643;
}

.flex-box {
  display: flex;
  flex-flow: column nowrap;
}

.grid-item {
  margin: 10px;
  background: #FFF;
  flex-basis: 100%;
  display: inline-flex;
  flex-flow: row wrap;
}

.flex-item {
  color: black;
  display: flex;
  flex-basis: 33.333%;
  overflow: hidden;
  flex-flow: column wrap;
}

.wishlist-item {
  order: 1;
}

.name {
  order: 2;
}

.long-name {
  order: 3;
}

.desc {
  order: 4;
}

.price-item {
  order: 5;
}

.price-item {
  order: 5;
}

.button-item {
  order: 6;
}

//============================
//===========colors===========
//============================
.wishlist-item {
  color: red;
}

.name {
  color: grey;
}

.long-name {
  color: brown;
}

.desc {
  color: orange
}

.before-price {
  color: blue;
}

.price {
  color: green;
}