CSS запускает каждую строку в одном и том же положении на каждом элементе [дублировать] ⇐ CSS

[Anonymous]

Например, я хотел бы, чтобы строка «отзывы» находилась в одном и том же положении на каждом LI, независимо от того, какой размер заголовок-
, к сожалению, использование Min-Height в заголовке не является вариантом, так как он может варьироваться в размер для каждого
, это возможно с расщеплением или чем-то подобным? />https://jsfiddle.net/t8bzusgk/16/

Код: Выделить всё

ul {
display: flex;
gap: 20px;
list-style: none;
padding: 0;
}

li {
display: flex;
flex-direction: column;
height: auto;
background-color: #f1f1f1;
border: 1px solid black;
width: 100%;
padding: 20px;
}

.content {
display: grid;
grid-template-rows: auto auto auto auto; /* 4 rows for: title, reviews, price, discount */
gap: 0.5rem;
height: 100%;
}

.price {
grid-row: 3;
background-color: cornflowerblue;
color: white;
}

.reviews {
background-color: tomato;
}

h2 {
margin: 0;
background-color: goldenrod;
}< /code>
        [list]
[*]

Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse minima eum possimus eius aperiam deleniti aspernatur eligendi illum repellendus sed.
Reviews
$10.99
10% off today!


[*]

Lorem ipsum
Reviews
$10.99



[*]

Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse minima eum po.
Reviews
$10.99
10% off today!


[/list]

Подробнее здесь: https://stackoverflow.com/questions/796 ... -each-item