Vertically center a block above another block's bottom line

Question

This is the HTML I have :

<div class="image">Image</div>
<div class="legend">
  Legend<br/>
  width variable height<br/>
  the middle of the legend need to be exactly on the bottom of the image, regardless of the height of the legend and image
</div>
<div class="following">The following text should follow immediatly the legend,regardless of the height of the legend or the image</div>

This is the result I want :

This is what I tried :

.image {
  height:100px;
  background-color:red; 
}
.legend {
  transform:translateY(-50%);
  background-color:blue; 
  width:300px;
  margin:0 auto
}
.following {
  background-color:yellow;
  margin-top:-45px;
}

This is the result I got :

Problem is : I don't wan't to have this margin between legend and following text.

The whole attempt codepen is here

Question : any solution to get the desired result without JS ?

(for the record : this is a solution with JS)

Answer 1

You can do this with simple positioning, wrapping your legend and the following text with a div and make its position:relative and following can be set as position:absolute

check this snippet

.image {
  height: 100px;
  background-color: red;
}
.legend {
  transform: translateY(-50%);
  background-color: blue;
  width: 300px;
  margin: 0 auto;
}
.following {
  background-color: yellow;
  position: absolute;
  top: 50%;
  width: 100%;
}
.container {
  position: relative;
  left: 0;
}

<div class="image">Image</div>
<div class="container">
  <div class="legend">
    Legend
    <br/>width variable height
    <br/>the middle of the legend need to be exactly on the bottom of the image, regardless of the height of the legend and image
  </div>
  <div class="following">The following text should follow immediatly the legend,regardless of the height of the legend or the image</div>
</div>

Another solution with flexbox

.image {
  height:100px;
  background-color:red; 
}
.item{
  transform:translateY(-50%);
}
.center {
  background-color:blue; 
  width:300px;
  margin:0 auto;

}

.Aligner {
  display: flex;
  flex-direction:column;
}


.Aligner-item--top {
   width:100%;
   background:red;
}

.following {

  width:100%;
  background-color:yellow;
  
}

<div class="Aligner">

  <div class=" Aligner-item Aligner-item--top image">Image</div>
  <div class="item">
  <div class="Aligner-item center">Legend<br/>
  width variable height<br/>
  the middle of the legend need to be exactly on the bottom of the image, regardless of the height of the legend and image</div>
  <div class="Aligner-item Aligner-item--bottom following">The following text should follow immediatly the legend,regardless of the height of the legend or the image</div>
  </div>
</div>

Hope this helps

Answer 2

Do you know the height of the element? Do you need it to be exactly 50%?

Here is an example with a fixed 50px-negative top margin:

.image {
  height:100px;
  background-color:red; 
}
.legend {
  background-color:blue; 
  width:300px;
  margin:-50px auto 0;
}
.following {
  background-color:yellow;
}

<div class="image">Image</div>
<div class="legend">
  Legend<br/>
  width variable height<br/>
  the middle of the legend need to be exactly on the bottom of the image, regardless of the height of the legend and image
</div>
<div class="following">The following text should follow immediatly the legend, regardless of the height of the legend or the image</div>

Another option (which is probably not exactly what you are looking for) but it's a nice solution :)

.image {
  height:100px;
  background-color:red; 
}
.legend {
  background-color:blue; 
  width:300px;
  margin:0 auto;
  transform: translateY(-50%) translateX(-50%);
  position: absolute;
  left: 50%;
}
.legend:after {
  content: attr(following);
  display: block;
  width: 100vw;
  clear: both;
  position: absolute;
  background-color:yellow;
  height: auto;
  transform: translateX(-50%);
  left: 50%;
  
}
.following {
}

<div class="image">Image</div>
<div class="legend" following="The following text should follow immediatly the legend, regardless of the height of the legend or the image">
  Legend<br/>
  width variable height<br/>
  the middle of the legend need to be exactly on the bottom of the image, regardless of the height of the legend and image
</div>