кажется, такого еще не было
<style>
div.wrapper{
width: 600px;
margin: 0 auto;
}
.col-1, .col-2{
float: left;
}
.col-1{
width: 100%;
}
.col-2{
width: 50%;
}
.font-20{
font-size: 20px;
line-height: 24px;
}
.font-17{
font-size: 17px;
line-height: 20px;
}
.circle{
padding-left: 20px;
position: relative;
}
.circle:before{
content: " ";
border-radius: 50%;
width: 16px;
height: 16px;
display: block;
position: absolute;
left: 0px;
top: 0;
}
.circle-purple:before{
background-color: purple;
}
.circle-green:before{
background-color: green;
}
.circle-red:before{
background-color: red;
}
.left-shift-4{
position: relative;
left: 25%;
top: 0;
}
.font-center{
text-align: center;
}
p{
margin-top: 5px;
margin-bottom: 5px;
}
</style>
<div class="wrapper">
<div class="col-1 font-20 font-center">рецепты роста и биза</div>
<div class="col-2"><p class=" font-17 circle circle-purple">Сокращение издержек</p></div>
<div class="col-2"><p class=" font-17 circle circle-green">Улучшение управляемости</p></div>
<div class="col-2"><p class=" font-17 circle circle-red left-shift-4">Повышение эффективности</p></div>
</div>

Я, конечно поздно, но не понимаю зачем делать все это div'ами? Почему не сделать просто центрированный список, типа такого https://jsfiddle.net/vdgakxm9/4/?

У тебя пример как сделать "здесь и сейчас", у меня архитектурное решение

Согласен, но на мой взгляд, такая строгая архитектура для здесь и сейчас, если завтра понадобится изменить контент, или количество пунктов, придется придумывать еще классов.

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.