Align texts and image in the middle

Is there a way to align texts, image and map in the same line here

<b style = "color:#777777">Date : </b> 2015-06-14 
<b style = "color:#777777">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Image : </b> 
<img src="https://observation.org/photos/as.jpg"alt="Ts" width="400" height="400"> 
<b style = "color:#777777">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Location : </b> 
<iframe src = "https://maps.google.com/maps?q= 152 , 22.1 &hl=es;z=18&amp;output=embed" width="400" height="400"></iframe>
<br><br>

Right now, it is getting displayed as below. But it should get aligned in the middle

>Solution :

You can use display: flex and align-items: center on the container parent of those elements:

.container {
display: flex;
align-items: center;
}

<div class="container">
  <b style="color:#777777">Date : </b> 2015-06-14
  <b style="color:#777777">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Image : </b>
  <img src="https://observation.org/photos/as.jpg" alt="Ts" width="400" height="400">
  <b style="color:#777777">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Location : </b>
  <iframe src="https://maps.google.com/maps?q= 152 , 22.1 &hl=es;z=18&amp;output=embed" width="400" height="400"></iframe>
  <br><br>
</div>