как поместить 4 изображения и название и DISCRIPTION бок о бок в HTML окне

Question

Извините, если это вопросы повторяется, потому что я очень очень любитель на английском

Мой вопрос заключается в том, как поместить 4 изображения и название и описание бок сторона в окне html. Нет ссылки, только текст. Как показано ниже:

Answer 1

Flex коробка путь:

https://jsfiddle.net/s1mreoe8/1/

.flex{ 
    display:flex; 
} 

Вот руководство: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

.first { 
 
    float: left; 
 
    width: 50%; 
 
} 
 
.img { 
 
    float: left; 
 
\t width:39%; 
 
\t padding:10px; 
 
} 
 
.text 
 
{ 
 
\t width:39%; 
 
\t float: left; 
 
\t padding:10px; 
 
} 
 
.img img { 
 
    width: 100%; 
 
}

<div class="row"> 
 
\t <div class="first"> 
 
    \t <div class="img"> 
 
     \t <img src="http://www.fogosglobo.com.br/img/250x250-circle.png" alt="img"> 
 
     </div> 
 
     <div class="text"> 
 
     \t <p><strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Nunc molestie, nibh eu molestie vestibulum, urna neque interdum orci, ut egestas diam massa vel magna. Mauris eget nunc nec sem ultrices varius.</p> 
 
     </div> 
 
    </div> 
 
    <div class="first"> 
 
    \t <div class="img"> 
 
     \t <img src="http://www.fogosglobo.com.br/img/250x250-circle.png" alt="img"> 
 
     </div> 
 
     <div class="text"> 
 
     \t <p><strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Nunc molestie, nibh eu molestie vestibulum, urna neque interdum orci, ut egestas diam massa vel magna. Mauris eget nunc nec sem ultrices varius.</p> 
 
     </div> 
 
    </div> 
 
    
 
    
 
</div>