JSFiddle - React, Tailwind, and code Playground

by Przmak

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>
    <!-- GridItem/FlexItem -->
    <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 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...

CSS

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

.flex-box {
  display: flex;
  flex-flow: row wrap;
  flex: 1;
}

.grid-item {
  margin: 10px;
  background: #FFF;
  flex: 0 1 300px;
  display: inline-flex;
  flex-flow: column nowrap;
}

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

.wishlist-item {}

.name {}

.long-name {}

.desc {}

.price-item {}

.button-item {
  justify-content: flex-end;
}

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

.name {
  color: grey;
}

.long-name {
  color: brown;
}

.desc {
  color: orange
}

.before-price {
  color: blue;
}

.price {
  color: green;
}