как выдвинуть блок справа налево

body, html, h1, p { 
  margin: 0; 
  padding: 0; 
} 
 
main { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: center; 
      -ms-flex-pack: center; 
          justify-content: center; 
  -webkit-box-orient: vertical; 
  -webkit-box-direction: normal; 
      -ms-flex-direction: column; 
          flex-direction: column; 
} 
 
.circlewrap { 
  margin-top: 20px; 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: center; 
      -ms-flex-pack: center; 
          justify-content: center; 
  -webkit-box-orient: vertical; 
  -webkit-box-direction: normal; 
      -ms-flex-direction: column; 
          flex-direction: column; 
  -ms-flex-wrap: wrap; 
      flex-wrap: wrap; 
  width: 100%; 
  -webkit-box-shadow: 0px 0px 0px 3px grey; 
          box-shadow: 0px 0px 0px 3px grey; 
} 
@media (min-width: 1170px) { 
  .circlewrap { 
    -webkit-box-shadow: none; 
            box-shadow: none; 
    -webkit-box-pack: start; 
        -ms-flex-pack: start; 
            justify-content: flex-start; 
    -webkit-box-orient: horizontal; 
    -webkit-box-direction: normal; 
        -ms-flex-direction: row; 
            flex-direction: row; 
    width: 90%; 
    height: 100px; 
  } 
} 
.circlewrap .text { 
  position: relative; 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-orient: vertical; 
  -webkit-box-direction: normal; 
      -ms-flex-direction: column; 
          flex-direction: column; 
  -webkit-box-pack: center; 
      -ms-flex-pack: center; 
          justify-content: center; 
  text-align: center; 
  margin-top: 6px; 
} 
@media (min-width: 1170px) { 
  .circlewrap .text { 
    position: absolute; 
    left: calc(50% - 580px); 
    text-align: right; 
  } 
} 
.circlewrap .text h1 { 
  color: red; 
  font-size: 1.5em; 
  padding: 6px; 
} 
@media (min-width: 1170px) { 
  .circlewrap .text h1 { 
    max-width: 500px; 
  } 
} 
.circlewrap .text p { 
  font-size: 1em; 
  padding: 6px; 
} 
@media (min-width: 1170px) { 
  .circlewrap .text p { 
    max-width: 500px; 
  } 
} 
.circlewrap .circle { 
  position: relative; 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  z-index: 1; 
  -webkit-box-pack: center; 
      -ms-flex-pack: center; 
          justify-content: center; 
  -webkit-box-align: center; 
      -ms-flex-align: center; 
          align-items: center; 
} 
@media (min-width: 1170px) { 
  .circlewrap .circle { 
    position: absolute; 
    left: calc(50% - 53px); 
  } 
} 
.circlewrap .circle .c-cont { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: center; 
      -ms-flex-pack: center; 
          justify-content: center; 
  -webkit-box-align: center; 
      -ms-flex-align: center; 
          align-items: center; 
  width: 100px; 
  height: 100px; 
  border: 3px solid #c2c2c2; 
  border-radius: 53px; 
  -webkit-transition: all 0.2s ease-in; 
  transition: all 0.2s ease-in; 
} 
.circlewrap .circle .c-cont img { 
  width: 60px; 
  height: 60px; 
} 
@media (min-width: 1170px) { 
  .circlewrap .circle:hover { 
    cursor: pointer; 
  } 
} 
@media (min-width: 1170px) { 
  .circlewrap .circle:hover + .h-wrap { 
    -webkit-box-shadow: 0px 0px 0px 3px #f00; 
            box-shadow: 0px 0px 0px 3px #f00; 
    -webkit-filter: opacity(1); 
            filter: opacity(1); 
    z-index: 2; 
    cursor: pointer; 
  } 
} 
@media (min-width: 1170px) { 
  .circlewrap .h-wrap:hover { 
    -webkit-box-shadow: 0px 0px 0px 3px #f00; 
            box-shadow: 0px 0px 0px 3px #f00; 
    z-index: 2; 
    cursor: pointer; 
    -webkit-animation-name: bordW; 
            animation-name: bordW; 
    -webkit-animation-duration: 1s; 
            animation-duration: 1s; 
    width: 600px; 
  } 
} 
.circlewrap .h-wrap { 
  position: relative; 
  margin-top: 3px; 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-orient: vertical; 
  -webkit-box-direction: normal; 
      -ms-flex-direction: column; 
          flex-direction: column; 
  border-radius: 50px; 
} 
@media (min-width: 1170px) { 
  .circlewrap .h-wrap { 
    width: 100px; 
    height: 100px; 
    position: absolute; 
    left: calc(50% - 50px); 
    overflow: hidden; 
    -webkit-box-orient: horizontal; 
    -webkit-box-direction: normal; 
        -ms-flex-direction: row; 
            flex-direction: row; 
  } 
} 
.circlewrap .h-wrap .hidden { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: center; 
      -ms-flex-pack: center; 
          justify-content: center; 
  -webkit-box-align: center; 
      -ms-flex-align: center; 
          align-items: center; 
  text-align: center; 
} 
@media (min-width: 1170px) { 
  .circlewrap .h-wrap .hidden { 
    margin-left: 120px; 
    text-align: left; 
  } 
} 
.circlewrap .h-wrap .hidden p { 
  margin: 6px; 
  padding: 6px; 
} 
@media (min-width: 1170px) { 
  .circlewrap .h-wrap .hidden p { 
    -webkit-animation-name: textQ; 
            animation-name: textQ; 
    -webkit-animation-duration: 2s; 
            animation-duration: 2s; 
  } 
} 
 
@-webkit-keyframes textQ { 
  0% { 
    -webkit-filter: opacity(0); 
            filter: opacity(0); 
  } 
  25% { 
    -webkit-filter: opacity(0); 
            filter: opacity(0); 
  } 
  50% { 
    -webkit-filter: opacity(0.5); 
            filter: opacity(0.5); 
  } 
  100% { 
    -webkit-filter: opacity(1); 
            filter: opacity(1); 
  } 
} 
 
@keyframes textQ { 
  0% { 
    -webkit-filter: opacity(0); 
            filter: opacity(0); 
  } 
  25% { 
    -webkit-filter: opacity(0); 
            filter: opacity(0); 
  } 
  50% { 
    -webkit-filter: opacity(0.5); 
            filter: opacity(0.5); 
  } 
  100% { 
    -webkit-filter: opacity(1); 
            filter: opacity(1); 
  } 
} 
@-webkit-keyframes bordW { 
  0% { 
    width: 100px; 
  } 
  100% { 
    width: 600px; 
  } 
} 
@keyframes bordW { 
  0% { 
    width: 100px; 
  } 
  100% { 
    width: 600px; 
  } 
} 
.circlewrap-reverse { 
  margin-top: 20px; 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: center; 
      -ms-flex-pack: center; 
          justify-content: center; 
  -webkit-box-orient: vertical; 
  -webkit-box-direction: normal; 
      -ms-flex-direction: column; 
          flex-direction: column; 
  -ms-flex-wrap: wrap; 
      flex-wrap: wrap; 
  width: 100%; 
  -webkit-box-shadow: 0px 0px 0px 3px grey; 
          box-shadow: 0px 0px 0px 3px grey; 
} 
@media (min-width: 1170px) { 
  .circlewrap-reverse { 
    -webkit-box-shadow: none; 
            box-shadow: none; 
    -webkit-box-pack: end; 
        -ms-flex-pack: end; 
            justify-content: flex-end; 
    -webkit-box-orient: horizontal; 
    -webkit-box-direction: reverse; 
        -ms-flex-direction: row-reverse; 
            flex-direction: row-reverse; 
    width: 90%; 
    height: 100px; 
  } 
} 
.circlewrap-reverse .text { 
  position: relative; 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-orient: vertical; 
  -webkit-box-direction: normal; 
      -ms-flex-direction: column; 
          flex-direction: column; 
  -webkit-box-pack: center; 
      -ms-flex-pack: center; 
          justify-content: center; 
  text-align: center; 
  margin-top: 6px; 
} 
@media (min-width: 1170px) { 
  .circlewrap-reverse .text { 
    position: absolute; 
    left: calc(50% + 66px); 
    text-align: left; 
  } 
} 
.circlewrap-reverse .text h1 { 
  color: red; 
  font-size: 1.5em; 
  padding: 6px; 
} 
@media (min-width: 1170px) { 
  .circlewrap-reverse .text h1 { 
    max-width: 500px; 
  } 
} 
.circlewrap-reverse .text p { 
  font-size: 1em; 
  padding: 6px; 
} 
@media (min-width: 1170px) { 
  .circlewrap-reverse .text p { 
    max-width: 500px; 
  } 
} 
.circlewrap-reverse .circle { 
  position: relative; 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  z-index: 1; 
  -webkit-box-pack: center; 
      -ms-flex-pack: center; 
          justify-content: center; 
  -webkit-box-align: center; 
      -ms-flex-align: center; 
          align-items: center; 
} 
@media (min-width: 1170px) { 
  .circlewrap-reverse .circle { 
    position: absolute; 
    left: calc(50% - 53px); 
  } 
} 
.circlewrap-reverse .circle .c-cont { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: center; 
      -ms-flex-pack: center; 
          justify-content: center; 
  -webkit-box-align: center; 
      -ms-flex-align: center; 
          align-items: center; 
  width: 100px; 
  height: 100px; 
  border: 3px solid #c2c2c2; 
  border-radius: 53px; 
  -webkit-transition: all 0.2s ease-in; 
  transition: all 0.2s ease-in; 
} 
.circlewrap-reverse .circle .c-cont img { 
  width: 60px; 
  height: 60px; 
} 
@media (min-width: 1170px) { 
  .circlewrap-reverse .circle:hover { 
    cursor: pointer; 
  } 
} 
@media (min-width: 1170px) { 
  .circlewrap-reverse .circle:hover + .h-wrap { 
    -webkit-box-shadow: 0px 0px 0px 3px #f00; 
            box-shadow: 0px 0px 0px 3px #f00; 
    -webkit-filter: opacity(1); 
            filter: opacity(1); 
    z-index: 2; 
    cursor: pointer; 
  } 
} 
@media (min-width: 1170px) { 
  .circlewrap-reverse .h-wrap:hover { 
    -webkit-box-shadow: 0px 0px 0px 3px #f00; 
            box-shadow: 0px 0px 0px 3px #f00; 
    z-index: 2; 
    cursor: pointer; 
    -webkit-animation-name: bordW; 
            animation-name: bordW; 
    -webkit-animation-duration: 1s; 
            animation-duration: 1s; 
    width: 600px; 
  } 
} 
.circlewrap-reverse .h-wrap { 
  position: relative; 
  margin-top: 3px; 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-orient: vertical; 
  -webkit-box-direction: normal; 
      -ms-flex-direction: column; 
          flex-direction: column; 
  border-radius: 50px; 
} 
@media (min-width: 1170px) { 
  .circlewrap-reverse .h-wrap { 
    width: 100px; 
    height: 100px; 
    position: absolute; 
    left: calc(50% - 50px); 
    overflow: hidden; 
    -webkit-box-orient: horizontal; 
    -webkit-box-direction: reverse; 
        -ms-flex-direction: row-reverse; 
            flex-direction: row-reverse; 
    z-index: 10; 
  } 
} 
.circlewrap-reverse .h-wrap .hidden { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: center; 
      -ms-flex-pack: center; 
          justify-content: center; 
  -webkit-box-align: center; 
      -ms-flex-align: center; 
          align-items: center; 
  text-align: center; 
  background: red; 
} 
@media (min-width: 1170px) { 
  .circlewrap-reverse .h-wrap .hidden { 
    margin-left: 120px; 
    text-align: left; 
  } 
} 
.circlewrap-reverse .h-wrap .hidden p { 
  margin: 6px; 
  padding: 6px; 
} 
@media (min-width: 1170px) { 
  .circlewrap-reverse .h-wrap .hidden p { 
    -webkit-animation-name: textQ; 
            animation-name: textQ; 
    -webkit-animation-duration: 2s; 
            animation-duration: 2s; 
  } 
}

<body> 
    <main> 
        <div class="circlewrap"> 
            <div class="text"> 
                <h1>Анализ конкурентной среды</h1> 
                <p>Проводится детальный анализ ТОПА по продвигаемым запросам и сайтам конкурентов</p> 
            </div> 
            <div class="circle"> 
                <div class="c-cont"><img src="img/x1.png"></div> 
            </div> 
            <div class="h-wrap"> 
                <div class="hidden"> 
                    <p>На данном этапе SEO специалисты анализируют сайт конкурентов по продвигаемым запросам находящимся в ТОПЕ поисковых систем. После чего составляется план работ по продвижению.</p> 
                </div> 
            </div> 
        </div> 
        <div class="circlewrap-reverse"> 
            <div class="h-wrap"> 
                <div class="hidden"> 
                    <p>На данном этапе SEO специалисты анализируют сайт конкурентов по продвигаемым запросам находящимся в ТОПЕ поисковых систем. После чего составляется план работ по продвижению.</p> 
                </div> 
            </div> 
            <div class="circle"> 
                <div class="c-cont"><img src="img/x1.png"></div> 
            </div> 
            <div class="text"> 
                <h1>Анализ конкурентной среды</h1> 
                <p>Проводится детальный анализ ТОПА по продвигаемым запросам и сайтам конкурентов</p> 
            </div> 
        </div> 
    </main> 
</body>