JSFiddle - React, Tailwind, and code Playground

by cathead

HTML

<div class="layer">
  <img class="layer__img" src="https://loremflickr.com/800/300/charcuterie" alt="">
  <div class="layer__content">
    <h2>collaborative</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero minima, quidem iusto sunt voluptate earum ab vel veniam dolorum, ad sequi laboriosam quia iste, ea itaque debitis, doloremque ipsa incidunt?</p>
  </div>
</div>

<div class="container">
  I am a regular container. the text above should align with me
</div>

SCSS

.layer {
  background-color: DarkSlateGray;
  display: flex;
  flex-direction: row-reverse;
  
  &__img {
    max-width: 50%;
  }
  
  &__content {
    max-width: 600px;
    color: white;
  }
}

.container {
  box-shadow: 0 0 0 4px gold;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}