JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<div class="block">
  <div class="block-desc">
      <p>Donec id elit non mi porta gravida at eget metus. <br>Nulla vitae elit libero, a pharetra augue. <br>Lorem ipsum dolor sit amet, <br> consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod.</p>
  </div>
  
  <table class="block-table">
    <tr>
      <td><div class="product">Товар</div></td>
      <td><div class="product">Товар</div></td>
      <td><div class="product">Товар</div></td>
    </tr>
  </table>
</div>

SCSS

html, body {
  height: 100%;
  background-color: green;
}

.block {
  &-desc {
    display: inline-block;
    padding: 20px;
    background-color: #eee;
  }
  
  &-table {
    margin-top: 20px;
    border-collapse: separate;
  }
  
  .product {
    padding: 20px 30px;
    margin: 0 20px;
    background: blue;
  }
}