JSFiddle - React, Tailwind, and code Playground

by meeky333

HTML

<div class="container">
  <div class="image-container">
    <div class="image"></div>
  </div>
  <div class="details-container">
    <h1>Header Text</h1>
    <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
  </div>
</div>

SCSS

.container {
  max-width: 250px;
  background: cyan;
  display: flex;
  align-items: center;
}

.image-container {
  background: purple;
}

.image {
  width: 35px;
  height: 35px;
  padding: 10px;
}

.details-container {
  background: yellow;
  padding: 5px;
  
  h1 {
    font-size: 1rem;
  }
  p {
    fint-size: 0.7rem;
  }
}