JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="list listFlex listBetween workingProcessList">
				<li class="workingProcessItem item1">
					<div class="workingProcessItemIco"></div>

					<div class="workingProcessItemTitle">
						Выезд<br>на объект
					</div>

					<div class="workingProcessItemText">
						Наши специалисты по месту делают необходимые замеры
						и узнают Ваши пожелания по внешнему виду изделий.
					</div>
				</li>

				<li class="workingProcessItem item2">
					<div class="workingProcessItemIco"></div>

					<div class="workingProcessItemTitle">
						Составление<br>
						эскизов
					</div>

					<div class="workingProcessItemText">
						На основе размеров и Ваших пожеланий по дизайну наши художники делаю эскизы. После чего рассчитывается ориентировочная сумма заказа.
					</div>
				</li>

				<li class="workingProcessItem item3">
					<div class="workingProcessItemIco"></div>
					<div class="workingProcessItemTitle">
						Согласование<br>
						чертежей
					</div>

					<div class="workingProcessItemText">
						На данном этапе мы утверждаем с Вами окончательный дизайн изделий и их стоимость. При необходимости составляем договор и берём предоплату.
					</div>
				</li>

				<li class="workingProcessItem item4">
					<div class="workingProcessItemIco"></div>

					<div class="workingProcessItemTitle">
						Изготовление
					</div>

					<div class="workingProcessItemText">
						Ковка, произведение слесарных и сварочных работ, покраска металлоизделий.
					</div>
				</li>

				<li class="workingProcessItem item5">
					<div class="workingProcessItemIco"></div>

					<div class="workingProcessItemTitle">
						Монтаж
					</div>

					<div class="workingProcessItemText">
						Ковка, произведение слесарных и сварочных работ, покраска металлоизделий.
					</div>
				</li>

			</ul>

CSS

* {
  box-sizing: border: box;
}

body {
  margin: 0;
  
  font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  
  background: #000;
}

.list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.list > li {position: relative;}
.listFlex {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;

	-webkit-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
}

.listFlex > li {
	-webkit-flex: 0 0 auto;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
}

.listBetween {
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.workingProcessItem {
	width: 115px;

	transition: .5s ease-in-out;
}

.workingProcessItem:hover {
	width: 45%;
}

.workingProcessItemIco {
	position: relative;
	
  border: 2px solid #fff;
	width: 96px;
	height: 96px;
	margin-bottom: 15px;
}

.workingProcessItem:not(:last-child):before {
	position: absolute;
	top: 47px;
	left: 115px;
	right: 20px;

	transition: .5s ease-in-out;
	
	height: 2px;

	background-color: #fff;

	pointer-events: none;

	content: '';
}

.workingProcessItem:hover:before {	
	background-image: linear-gradient(to right, rgb(245,137,17) 0%, rgb(255,255,255) 100%);
}

.workingProcessItemTitle {
	text-transform: uppercase;
	color: #fff;
	font-size: 14px;
	line-height: 100%;
}

.workingProcessItem:hover .workingProcessItemTitle {
	background-image: linear-gradient(to right, rgb(245,137,17) 0%, rgb(255,255,255) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #F3A252;
}

.workingProcessItemText {
	position: absolute;
	top: calc(100% + 30px);

	display: none;

	color: #fff;
	line-height: 24px;
}

.workingProcessItem:hover .workingProcessItemText {
	display: block;
}