<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">

<div class="slider">
  <div class="slider-images">
    <div class="slider-image" style="background-image: url('https://i.pinimg.com/564x/07/4f/d8/074fd8b19657ad9af587653672e3d67c.jpg')">
    </div>
    <div class="slider-image" style="background-image: url('https://i.pinimg.com/564x/5e/fb/28/5efb289ceff71f0d0959162054d99133.jpg')">
    </div>
    <div class="slider-image" style="background-image: url('https://i.pinimg.com/564x/f7/a2/45/f7a24510f006ac1b7e78bfd7b8ca982b.jpg')">
    </div>
  </div>
  <div class="slider-contents">
    <div class="slider-content__wrapper">
      <div class="slider-content__text">
        <p>
          The Calathea orbifolia’s oversized leaves are striped with silvery bands that are tastefully beautiful in a simple way. 
        </p>
      </div>
    </div>
    <div class="slider-content__wrapper">
      <div class="slider-content__text">
        <p>
          Syngonium varieties are easy care plants as long as you remember to water them. They are low light tolerant houseplants and will grow virtually anywhere in your home.
        </p>
      </div>
    </div>
    <div class="slider-content__wrapper">
      <div class="slider-content__text">
        <p>
          Monstera are species of evergreen tropical vines/shrubs that are native to Central America.
        </p>
      </div>
    </div>
  </div>
</div>
$small-tablet:"max-width:60em";

* {
  margin: 0;
  padding: 0;
}

.slider {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  
  .slider-images {
    display: flex;
    flex: 0 1 50%;
    height: 100%;
    width: 50%;
    flex-direction: column;
  }
  
  .slider-image {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
  }
  
  .slider-contents {
    display: flex;
    flex: 0 1 50%;
    flex-direction: column;
    height: 100%;
    width: 50%;
  }
  
  .slider-content__wrapper {
    display: flex;
    align-items: center;
    height: 100vh;
  }
  
  .slider-content__text {
    max-width: 500px;
    padding: 50px 115px;
    
    position: sticky;
    top: 0;
    
    p {
      font-family: Lato,sans-serif;
      font-weight: 400;
      line-height: 1.6;
    }
  }
  
  @media screen and ($small-tablet) {
    flex-wrap: wrap;
    
    .slider-images, .slider-contents {
      width: 100%;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.