<div class="box-container">
  <div class="box1-content content">
    <h1>Hello,</h1>
    <p>Utilise outside the box thinking and try to think outside the box. Build transformation mapping and then maximise share of voice. Repurpose agile and then create a better customer experience. Funneling brand ambassadors so that as an end result, we further your reach. Leveraging customer journeys and possibly use best practice.</p>
  </div>
  <div class="box1-side">
    <button class="right-button">⟶</button>
  </div>
  <div class="box2-side">
    <button class="left-button">⟵</button>
  </div>
  <div class="box2-content content">
    <h1>Good Bye,</h1>
    <p>Leveraging growth hacking while remembering to think outside the box. Engage agile and above all, be CMSable. Generate innovation yet disrupt the balance. Leading cloud computing with the aim to be CMSable. Lead core competencies with a goal to be on brand. Create brand pillars in order to get buy in.</p>
  </div>
</div>

body {
  background: #536475;
  font-family: serif;
  
  p {
    line-height: 1.2;
    letter-spacing: .2px;
    font-size: 15px;
  }
}

.box-container {
  margin: 100px auto;
  width: 80%;
  height: 500px;
  display: flex;
  align-items: stretch;
  box-shadow: 0 0 3px 5px rgba(0,0,0,0.03);
  
  &.right-open {
    .box1-content {
      flex: 0;
      padding: 0;
      opacity: 0;
    }
    .box1-side {
      flex: 0;
    }
    .box2-side {
      flex: 2;
    }
    .box2-content {
      flex: 4;
      padding: 30px 40px;
      opacity: 1;
    }
  }
}

.box1-content,
.box1-side,
.box2-content,
.box2-side {
  transition: all .3s ease-out;
  color: darkslategray;
  overflow: hidden;
}

// .content {
//   h1, p {
//     opacity: 0;
//     transform: translateY(50px);
//   }
//   &.text-in {
//     h1, p {
//       opacity: 1;
//       transform: translateY(0);
//     }
//   }
// }

.box1-side,
.box2-side {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.box1-content {
  background: whitesmoke;
  flex: 4;
  padding: 30px 40px;
}

.box1-side {
  background: #bac6d2;
  flex: 2;
}

.box2-side {
  background: #a6bdbd;
  flex: 0;
}

.box2-content {
  background: whitesmoke;
  flex: 0;
  // opacity: 0;
}

button {
  background: #11526b;
  padding: 10px 50px;
  border-radius: 5px;
  border: none;
  box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.32);
  color: white;
  margin: 30px 0;
}

const container = document.querySelector('.box-container');
const contents = document.querySelectorAll('.content');
const buttons = document.querySelectorAll('button');

buttons.forEach( button => button.addEventListener('click', function() {
  container.classList.toggle('right-open');
}));