Если применить display: flex, то не получится сделать, как на скрине ниже
Вот то, как это попытался сделать я:
.info {
margin-bottom: 170px;
}
.info__title {
font-size: 48px;
line-height: 1.2;
color: #333333;
text-transform: uppercase;
text-align: center;
margin-bottom: 80px;
font-weight: 900;
}
.info__wrap {
display: flex;
background-color: #F9F9F9;
border: 4px solid #051367;
border-radius: 15px;
}
.info__item {
width: calc(100% / 3);
padding: 42px;
padding-bottom: 80px;
}
.info__item:nth-child(2) {
background-color: #051367;
border-radius: 15px;
}
.info__item:nth-child(2) .info__subtitle,
.info__item:nth-child(2) .info__text p {
color: #fff;
}
.info__item:nth-child(2) .info__text p {
text-align: left;
}
.info__subtitle {
font-size: 24px;
line-height: 1.5;
text-align: center;
margin-bottom: 42px;
}
.info__text p {
font-size: 18px;
line-height: 2;
color: #333;
text-align: center;
}
.info__text p:not(:last-child) {
margin-bottom: 10px;
}
.info__text p span {
font-weight: 700;
}
.info__text ul li {
font-size: 18px;
line-height: 2;
color: #fff;
}
<div class="info__wrap">
<div class="info__item">
<p class="info__subtitle">lorem loremlorem lorem lorem lorem:</p>
<div class="info__text">
<p>lorem loremlorem lorem lorem lorem</p>
<p>lorem loremlorem lorem lorem lorem</p>
</div>
</div>
<div class="info__item">
<p class="info__subtitle">lorem loremlorem lorem lorem lorem:</p>
<div class="info__text">
<ul>
<li>lorem lorem</li>
<li>lorem lorem</li>
</ul>
<p>lorem lorem lorem loremlorem loremlorem loremlorem lorem</p>
</div>
</div>
<div class="info__item">
<p class="info__subtitle">lorem loremlorem lorem lorem lorem:</p>
<div class="info__text">
<p>lorem loremlorem lorem lorem lorem</p>
<p>lorem loremlorem lorem lorem lorem</p>
</div>
</div>
</div>