css vertical align text middle with overflow hidden - html

Question

i'm rendering divs within a loop. each div has a text (could be long- which means overflow: hidden is needed.)
As you can see the text on the left side is not vertical aligned middle.
I searched for an answer and every solution i found which made the left one vertical align middle, caused trouble to the first one, like in this case where the text of the right div is not display from the beggining ("***This is my desc..."):
The html code is:
<div class="js-recent-item recent-item" data-view-url="{{url}}">
{{#if isReport}}
<label class="report-card-title" title="{{title}}">{{title}}</label>
<div class="no-sides-padding report-container">
<div class="report-card-text Aligner" title="{{description}}">{{description}}</div>
</div>
{{/if}}
</div>
The css:
.report-card-text {
font-size: 12px;
padding: 10px;
text-align: center;
line-height: 18px;
height: 100px;
overflow: hidden;
}
.Aligner {
display: flex;
align-items: center;
justify-content: center;
}
.Aligner-item {
max-width: 50%;
}
.Aligner-item--top {
align-self: flex-start;
}
.Aligner-item--bottom {
align-self: flex-end;
}
I've tried to solve this with flexbox and with table-cell and didn't succeeded.
I will be happy to get your advises.
Thanks,
Ella.
************** UPDATE: The solution: *********************
{{#if isReport}}
<label class="report-card-title" title="{{title}}">{{title}}</label>
<div class="report-container">
<div class="report-card-text" title="{{description}}">{{description}}</div>
</div>
{{/if}}
The CSS:
.report-container{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 122px;
margin-top: -6px;
overflow: hidden;
}
.report-card-text{
.card-text;
padding : 5px 10px;
text-align: center;
line-height: 23px;
max-height: 100%;
}

Answer 1

Add a span inside the label and give it a max-height and overflow: hidden, and for the description you set a max-height/overflow: hidden on the report-card-text
body {
display: flex;
}
.js-recent-item {
display: flex;
flex-direction: column;
width: 200px;
}
.report-card-title {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 50px;
font-size: 26px;
border: 1px solid black;
}
.report-card-title span {
max-height: 50px;
overflow: hidden;
}
.report-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 150px;
font-size: 26px;
border: 1px solid black;
}
.report-card-text {
max-height: 100%;
overflow: hidden; /* use "auto" if to be able to scroll */
}
<div class="js-recent-item recent-item" data-view-url="{{url}}">
<label class="report-card-title" title="{{title}}">
<span>title 1 </span>
</label>
<div class="no-sides-padding report-container">
<div class="report-card-text" title="{{description}}">
description 1
</div>
</div>
</div>
<div class="js-recent-item recent-item" data-view-url="{{url}}">
<label class="report-card-title" title="{{title}}">
<span>first title title title title title title title title title last </span>
</label>
<div class="no-sides-padding report-container">
<div class="report-card-text Aligner" title="{{description}}">
first description description description description description description description description description description description description description description description last
</div>
</div>
</div>