JSFiddle - React, Tailwind, and code Playground

by helgatheviking

HTML

<h1>
table
</h1>
<table class="mnm_form">
  <tr class="product mnm_child_item">
    <td class="product-thumbnail">One</td>
    <td class="product-details">Two</td>
    <td class="product-quantity">Three</td>
  </tr>
</table>

<h1>
div grid
</h1>
<div class="mnm_form">
  <div class="product mnm_child_item">
    <div class="product-thumbnail">One</div>
    <div class="product-details">Two</div>
    <div class="product-quantity">Three</div>
  </div>
</div>

SCSS

.mnm_form {
  width: 100%;

  .product {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    
    > * {
      padding: 1em;
      border: 1px solid red;
      flex-basis: 100%;

      &.product-thumbnail,
      &.product-details {
        flex: 1;
      }
    }
  }
}