JSFiddle - React, Tailwind, and code Playground

by mzilverberg

HTML

<h3>Overflow: hidden example</h3>
<div class="outer-wrap">
  <img src="https://lorempixel.com/48/48/nature/1/" alt="" />
  <div class="text-wrap">
    <strong>Donec id elit non mi porta gravida at eget metus</strong>
    <p>Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor.</p>
  </div>
</div>

<h3>Display: table-cell example</h3>
<div class="outer-table">
  <img src="https://lorempixel.com/48/48/nature/1/" alt="" />
  <div class="text-wrap">
    <strong>Donec id elit non mi porta gravida at eget metus</strong>
    <p>Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor.</p>
  </div>
</div>

SCSS

// `overflow: hidden;` example
.outer-wrap {
  img {
    float: left;
    margin-right: 12px;
  }
  
  .text-wrap {
    overflow: hidden;
  }
}


// `display: table-cell;` example
.outer-table {
  display: table;
  
  img,
  .text-wrap {
    display: table-cell;
    vertical-align: top;
  }
  
  img {
    width: 48px;
    padding-right: 12px;
  }
  
}