Html CSS-图像上的文本

我有这样一个形象：

该网站反应迅速。因此，下面的问题需要遵循figcaption上的图像大小

我需要知道是否有可能将两个图标都放在de图像中。文本（左3行，右3行）和管道ico都可以使用HTML/CSS分割文本

---

有人知道我如何做到这一点吗？

您可以让它也像这样响应：

HTML

<div class="container">
<div class="panel">
    <img src="http://placehold.it/350x150/FFF/000" />
    <div class="panel-body">
        <div class="left"><img src="http://placehold.it/50x50/AEA/000" />
            <div class="box-text">
                <h2>Endereco</h2>
                <h2>Test1</h2>
                <h2>Test2</h2>
            </div>
        </div>
        <div class="right">
            <img src="http://placehold.it/50x50/AEA/000" />
            <div class="box-text">
                <h2>Endereco</h2>
                <h2>Test1</h2>
                <h2>Test2</h2>
            </div>
        </div>
    </div>
</div>
</div>

---

到目前为止，你做了什么来做到这一点？

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }
html,body{height:100%;}
img{width:100%;height:auto;}

.container{height:100%;}

.panel {
    position:relative;
    top:0;
    left:0;
    z-index:1;
    width: 100%;
    height: 100%;
    min-height:100%;     
}
.panel-body {
    height: 50%;
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
    z-index:2;
    background:red;
}
.left,.right{
    width:50%;
    display:inline-block;
    height:100%;
    float:left;
}
.left img,.right img{
    width:40%;
    height:100%;
    float:left;
}
.box-text{float:left;}