JSFiddle - React, Tailwind, and code Playground

HTML

<section class="container">
  <div class="container__inner">

    <div class="icons">
      <div class="icon">
       <img src="https://image.flaticon.com/icons/svg/1271/1271380.svg" alt="">
        <h4>Интуитивный дизайн</h4>
        <p>Мы подумали за вас</p>
      </div>
      <div class="icon">
        <img src="https://image.flaticon.com/icons/svg/1271/1271380.svg" alt="">
        <h4>Интуитивный дизайн</h4>
        <p>Мы подумали за вас</p>
      </div>
      <div class="icon">
       <img src="https://image.flaticon.com/icons/svg/1271/1271380.svg" alt="">
        <h4>Интуитивный дизайн</h4>
        <p>Мы подумали за вас</p>
      </div>	
      <div class="icon">
       <img src="https://image.flaticon.com/icons/svg/1271/1271380.svg" alt="">
        <h4>Интуитивный дизайн</h4>
        <p>Мы подумали за вас</p>
      </div>					
    </div>
    
  </div>
</section>

CSS

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

body {
  margin: 0;
  font-family: sans-serif;
  background-color: #eff4ff;
}

figure,
p,
h4 {
  margin: 0;
}

.container {
  
}

.container__inner {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}



/**/

.icons {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}

.icon {
  flex: 0 0 25%;
  max-width: 25%;
  text-align: center;
  font-size: 14px;
  padding: 20px 20px; /* работает все */
  position: relative;
}

.icon:not(:last-child):after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: #ddd;
}

.icon img {
  max-width: 60px;
  margin-bottom: 20px;
}

.icon h4 {
  font-size: inherit;
  margin-bottom: .4em;
}

.icon p {
  
}

@media (max-width: 767px) {
  
  .icon {
    flex: 0 0 50%;
    max-width: 50%;
   }
  
  
}