JSFiddle - React, Tailwind, and code Playground

by tjnicolaides

HTML

<div class="media-object">
  <div class="media-thumbnail">
    <img class="media-thumbnail-image" src="http://placebear.com/200/200">
  </div>
  <div class="media-content">
    <div class="media-headline">
      This is an okay length headline, right?
    </div>
    <p class="media-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis mauris eu elit fringilla facilisis. Nunc nec elit in odio maximus dapibus. Praesent finibus auctor elit non convallis. Sed hendrerit, nulla at pellentesque lacinia, nisl nisl pharetra arcu,
      quis ullamcorper erat diam eget tortor. Etiam cursus eu lorem maximus tempor.
    </p>
  </div>
</div>

<div class="media-object">
  <div class="media-content">
    <div class="media-headline">
      This is a really really really really long headline, okay?
    </div>
    <p class="media-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis mauris eu elit fringilla facilisis. Nunc nec elit in odio maximus dapibus. Praesent finibus auctor elit non convallis. Sed hendrerit, nulla at pellentesque lacinia, nisl nisl pharetra arcu,
      quis ullamcorper erat diam eget tortor. Etiam cursus eu lorem maximus tempor.
    </p>
  </div>
</div>

SCSS

.media {
  &-object {
    font-family: 'Helvetica', 'Arial', sans-serif;
    padding: 16px;
    margin: 16px;
    border: 1px solid darkblue;
    line-height: 1.4;
    display: flex;
  }
  &-thumbnail {
    flex: 0 0 auto;
    &-image {
      max-width: 100%;
    }
  }
  &-content {
    flex: 1 1 70%;
    .media-thumbnail + & {
      padding-left: 1.2em;
    }
  }
  &-headline {
    font-size: 1.5em;
    font-weight: 800;
    display: block;
  }
  &-text {
    display: block;
  }
}