Responsive Vertical Center Elements Inside Div

I need to verticaly align elements inside div container. Elements looks like on image below. With this code, I was able to nicely overwrap big picture on the left, but text and sm

Solution 1:

You're mixing block-level elements like h4 and inline like img and expecting them to align properly, possible but there's a simpler solution, add a third cell:

.contact{
  display: table;
  width: 100%;
  border-collapse: collapse;
  border: 2px solid #ddd;
}
.contact > div{
  display: table-cell;
  vertical-align:middle;
  padding:8px;
}
.contactimg{
  vertical-align: middle;
  width: 100%;
}
.pic{
  width: 100px;
}
.map{
  width: 60%;
}

<sectionclass="contact"><!-- Create three cells instead! --><divclass="adress"><h4>abc</h4><span>
      acbd<br>
      efgh
    </span><span>
      tyre<br>
      asdsad<br>
      cxzcasd
    </span></div><divclass="pic"><imgsrc="//placehold.it/100x100/fac"alt="map-ccc"></div><divclass="map"><imgsrc="//placehold.it/500x300/fac"alt="google-map"></div></section>