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

Изображение текст

Очень часто используется связка «изображение + текст»: списки статей, перечисление преимуществ, опции, достопримечательности и т.д.

Если пунктов немного (1-3), то можно верстать так:

<div class="list"> <img src="/wp-content/themes/meinland/icons/layers.svg"> <p>Некий текст</p></div>
<div class="list"> <img src="/wp-content/themes/meinland/icons/search.svg"> <p>Другая иконка и более длинный текст для проверки равнения решения</p>  </div>

Стили:

.list {display: flex; align-items: center; margin-bottom: 15px;}
.list img {max-width: 75px; padding-right: 25px;} 
  
@media screen and (max-device-width: 375px) { .list img {align-self: start;} }

Если пунктов побольше, то можно верстать так:

<div class="lists">

<div> <img src="/wp-content/themes/meinland/icons/layers.svg"> <p>Некий текст</p></div>
<div> <img src="/wp-content/themes/meinland/icons/search.svg"> <p>Другая иконка и более длинный текст для проверки равнения решения</p>  </div>
<div> <img src="/wp-content/themes/meinland/icons/layers.svg"> <p>Некий текст</p></div>
<div> <img src="/wp-content/themes/meinland/icons/search.svg"> <p>Другая иконка и более длинный текст для проверки равнения решения</p>  </div>
<div> <img src="/wp-content/themes/meinland/icons/layers.svg"> <p>Некий текст</p></div>
<div> <img src="/wp-content/themes/meinland/icons/search.svg"> <p>Другая иконка и более длинный текст для проверки равнения решения</p>  </div>

</div>

Стили:

.lists > div {display: flex; align-items: center; margin-bottom: 15px;}
.lists > div img {max-width: 75px; padding-right: 25px;} 
  
@media screen and (max-device-width: 375px) { .lists > div {align-self: start;} }

При необходимости корректируем ширину изображения. Но необходимо учитывать максимальную ширину исходника, и наоборот не использовать большие изображения для миниатюры.

Если в тексте должен быть заголовок или несколько абзацев, то добавляем дополнительный div

<div class="list"> 

<img src="/wp-content/uploads/2016/07/nature-lake.jpg"> 

<div> 
<h3>Заголовок текста</h3> 
<p>Некий текст</p>
<p>Учитывающий все современные тенденции. Множество конфигураций страниц для удовлетворения любых потребностей.</p> 
</div>  
  
</div>