JSFiddle - React, Tailwind, and code Playground

by cathead

HTML

<div class="layer">
  <div class="layer__img">
    <img src="https://loremflickr.com/1000/300/charcuterie" alt="">  
  </div>

  <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">
  <h1>Regular .container</h1>
  Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna.
</div>

SCSS

body, html {
  margin: 0; padding: 0;
}

.layer {
  background-color: DarkSlateGray;
  display: flex;
  flex-direction: row-reverse;
  
  &__img {
    max-width: 42%;
    flex-grow: 1;
    text-align: right;
    
    img {
      max-width: 100%;
    }
  }
  
  &__content {
    max-width: calc(8% + 500px);
    flex-grow: 1;
    color: white;
  }
}

.container {
  box-shadow: inset 0 0 0 4px gold;
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
  padding-left: 20px;
  padding-right: 20px;
}