JSFiddle - React, Tailwind, and code Playground

HTML

<div class="screen">
  <div class="pair active">
    <div class="a">A</div>
    <div class="b">или</div>
    <div class="c">B</div>
  </div>
  <div class="pair hidden">
    <div class="a">A</div>
    <div class="b">или</div>
    <div class="c">C</div>
  </div>
  <div class="pair hidden">
    <div class="a">B</div>
    <div class="b">или</div>
    <div class="c">C</div>
  </div>
</div>
<a class="next" href='#next'>Далее</a>

CSS

.screen {
  display: flex;
  height: 200px;
  border: 1px solid black;
  background: #fff;
}

.pair {
  width: calc(100% - 16px);
  left:0;
  margin: auto;
  transition: all 0.4s linear;
  opacity:1;
}

.pair.hidden {
  width: 0;
  left:0;
  opacity:0;
}

.pair div {
  display: inline-block;
  vertical-align: top;
}

JavaScript

var i = 0;
var btn = document.querySelector('.next');

btn.addEventListener('click', function() {
	var old = document.querySelectorAll('.pair')[i++];
  var cur = document.querySelectorAll('.pair')[i];
  
  old.className = old.className.replace('active', 'hidden');
  cur.className = cur.className.replace('hidden', 'active');
});