By css "flex" the outer div(s) "Video_Item" are same high = ok !
The innermost divs are in one column:
"Video_Screen" //all have the same size
"Titel_Daten" //have different height, because of the text length
"Video_Stat_Daten" //all have the same size
If you look at the snippet, it becomes clear that the div (s) "Video_Stat_Daten" must be aligned vertically downwards.
The code is included by another Page, beause of this there are no css positions settings.
<style type="text/css">
#MAbstand {
margin-top: 100px;
margin-bottom: 100px;
}
#Page_Mediathek {
padding-left: 100px;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
background-color: #086a87;
color: rgba(255,255,255,1);
}
.Video_Item {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 211px;
padding: 1px;
float: left;
margin-top: 20px;
margin-left: 1px;
margin-right: 1px;
margin-bottom: 20px;
border: 1px solid #aaa;
border: 1px solid green;
vertical-align: bottom;
}
.Video_Content {
}
.Titel {
font-family: Roboto, Arial, sans-serif;
letter-spacing: normal;
word-wrap: break-word;
font-size: small;
font-weight: bold;
}
.SubTitel {
font-family: Roboto, Arial, sans-serif;
letter-spacing: normal;
word-wrap: break-word;
font-size: small;
font-weight: bold;
}
.Video_Stat_Daten {
margin-bottom: 0 !important;
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
font-weight: bold;
}
</style>
<div id="MAbstand">
<hr />
</div>
<div id="Page_Mediathek">
<div class="Video_Item">
<div class="Video_Content">
<div>
<iframe
class="Wertefeld"
id="Video_ID_00090"
width="210"
height="118"
src="Beispiel.mp4"
frameborder="0"
allowfullscreen>
</iframe>
</div>
<div>
<div class="Titel_Daten">
<div class="Titel">Mahlzeit Freunde 6</div>
<div class="SubTitel"> </div>
</div>
</div>
<div class="Video_Stat_Daten">
<div>
<div>01:22:16</div>
<div>699 Views</div>
<div>23.12.2020</div>
</div>
</div>
</div>
</div>
<div class="Video_Item">
<div class="Video_Content">
<div>
<iframe
class="Wertefeld"
id="Video_ID_00089"
width="210"
height="118"
src="Beispiel.mp4"
frameborder="0"
allowfullscreen>
</iframe>
</div>
<div>
<div class="Titel_Daten">
<div class="Titel">Live Parade in Deutschland Hamburg 30.02.2021</div>
<div class="SubTitel"> </div>
</div>
</div>
<div class="Video_Stat_Daten">
<div>
<div>01:59:44</div>
<div>9717 Views</div>
<div>20.12.2020</div>
</div>
</div>
</div>
</div>
</div>