How do I align text with the image to fit the DIV in the container?

Question

This is part of the code for a website template I developed a few years ago:

.container {
  display: block;
  border: 3px;
}

.infosp1 {
  display: table;
  width: 700px;
  margin-bottom: 20px;
  margin-top: 20px;
  bottom: 30px;
}

.infosp1 div:nth-child(2) {
  display: table-cell;
  text-align: left;
}

div:nth-child(3) p {
  width: 90px;
  height: 200px;
  margin-top: -10px;
}

div img {
  height: 86px;
}

.infosp2,
.infoprice {
  display: table-cell;
  columns: 2;
  padding: 20px;
  color: #FFF;
  background-color: red;
}

.caravanprice {
  width: 50px;
  font-weight: 800;
  text-align: right;
}

<div class="container">

  <div class="infosp1">
    <div class="infosp2">Hotel de Paris</div>
    <div class="infoprice">€200</div>
  </div>
  <div class="infosp1">
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/H%C3%B4tel_Ville_Paris.jpg/1200px-H%C3%B4tel_Ville_Paris.jpg"></div>
    <div>
      <p>This Paris hotel has everything you need</p>
    </div>
  </div>

  <div class="infosp1">
    <div class="infosp2">Hotel de Paris</div>
    <div class="infoprice">€200</div>
  </div>
  <div class="infosp1">
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Hotel_Paris.jpg/1200px-Hotel_Paris.jpg"></div>
    <div>
      <p>This Paris hotel was excellent value</p>
    </div>
  </div>

</div>

The template works, but the text does not align evenly with the images, it's right at the bottom of the div after div.infosp1.

I tried margin-top with -10px; did not work at all.

I could use tables but I've got the header to work how I needed it to.

My biggest problem is trying to get everything to align evenly, and margin-top didn't work.

This relates to DIVs within the container element of a DIV.

As it is, this is a template that I'm testing which works OK but would really appreciate some help to get this looking and working better.

Answer 1

One way to fix it is to add vertical-align to the div that contains a caption. Using flexbox will be even better.

<div class="caption-container">
   <p>This Paris hotel was excellent value</p>
</div>

.caption-container {
  vertical-align: middle;
}