JSFiddle - React, Tailwind, and code Playground

HTML

<section class="cost">
		<div class="container">
			<h3 class="cost__title">ddd</h3>
			<div class="cost__block">
				<div class="cost__line">
					<div class="cost__box">
						<div class="cost__elem">1</div>
					</div>
					<div class="cost__box">
						<div class="cost__elem">2</div>
					</div>
					<div class="cost__box">
						<div class="cost__elem">3</div>
					</div>
					<div class="cost__box">
						<div class="cost__elem">4</div>
					</div>
					<div class="cost__box">
						<div class="cost__elem">5</div>
					</div>
					<div class="cost__box">
						<div class="cost__elem">6</div>
					</div>
					<div class="cost__box">
						<div class="cost__elem">7</div>
					</div>
					<div class="cost__box">
						<div class="cost__elem">8</div>
					</div>
					<div class="cost__box">
						<div class="cost__elem">9</div>
					</div>
				</div>
			</div>
			<div class="cost__container">
				<div class="cost__track">
					<div class="cost__item">описание первого блока</div>
					<div class="cost__item">описание второго блока</div>
					<div class="cost__item">описание третьего блока</div>
					<div class="cost__item">описание четвертого блока</div>
				</div>
			</div><!--end cost__container-->
			  <div class="cost__buttons">
			    <button class="cost__btn-prev">Следующий шаг</button>
			    <button class="cost__btn-next">Предыдущий шаг</button>
			  </div>
		</div>
	</section>

CSS

.cost {
  padding-bottom: 80px;
}

.cost__title {
  padding-bottom: 80px;
}

.cost__block {
  border-bottom: 2px solid red;
  margin-bottom: 80px;
}

.cost__line {
  position: relative;
  display: flex;
  margin: 0 -60px;
}

.cost__box {
  width: -webkit-calc(100% / 9 - 120px);
  width: calc(100% / 9 - 120px);
  margin: 0 60px;
}

.cost__elem {
  position: absolute;
  top: -15px;
  width: 29px;
  height: 29px;
  border: 2px solid #c19e74;
  background-color: #fff;
  border-radius: 50%;
}

.cost__container {
  overflow: hidden;
}

.cost__track {
  display: flex;
  transition: 0.2s;
}

.cost__buttons {
  padding-top: 20px;
}

@media screen and (max-width: 1050px) {

  .cost__line {
    margin: 0 -40px;
  }

  .cost__box {
    width: calc(100% / 9 - 80px);
    margin: 0 40px;
  }

}

@media screen and (max-width: 960px) {

  .cost__line {
    flex-direction: column;
    margin: 0px;
  }

  .cost__box {
    width: 100%;
    margin: 0px;
  }

}

* {
  box-sizing: border-box;
}

*:after,
*:before {
  box-sizing: border-box;
}