如何将 4 张图片以及标题和描述并排放入 html 框中

How put 4 images and title and description side by side in a html box

如何将 4 张图片以及标题和描述并排放在 html 框中?没有 link,只有文字。如下图:

Flex 盒子是可行的方法:

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

.flex{
  display:flex;
}

这是指南:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.first {
    float: left;
    width: 50%;
}
.img {
    float: left;
 width:39%;
 padding:10px;
}
.text
{
 width:39%;
 float: left;
 padding:10px;
}
.img img {
    width: 100%;
}
<div class="row">
 <div class="first">
     <div class="img">
         <img src="http://www.fogosglobo.com.br/img/250x250-circle.png" alt="img">
        </div>
        <div class="text">
         <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">
     <div class="img">
         <img src="http://www.fogosglobo.com.br/img/250x250-circle.png" alt="img">
        </div>
        <div class="text">
         <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>