JSFiddle - React, Tailwind, and code Playground

by helgatheviking

HTML

<table class="mnm tabular">
  <tr class="product">
    <td class="product-thumbnail">x</td>
    <td class="product-details">title</td>
    <td class="product-quantity">qty</td>
  </tr>
</table>

<hr />

<div class="mnm grid">
  <div class="product">
    <div class="product-thumbnail">x</div>
    <div class="product-details">title</div>
    <div class="product-quantity">qty</div>
  </div>
</div>

CSS

/**
 * Reset
 */


* {
  box-sizing: border-box;
}

hr {
  margin-bottom: 2em;
}

/**
 * Shared
 */

.product>div {
  padding: 1em;
}

.product-thumbnail {
  background: cyan;
}

.product-details {
  background: pink;
}

.product-quantity {
  background: gray;
}

/**
 * Grid
 */


.grid .product {
  overflow: hidden;
}

.grid .product>div {
  float: left;
  width: 50%;
}

.grid .product .product-quantity {
  display: block;
  width: 100%;
  clear: both;
}

/**
 * Table
 */

.tabular .product .product-quantity {
  colspan = 2;
}