I have some elements <li> that I estimate to stay inline-block . However, since the content of each <li> is different, they end up with different HEIGHT. Like that:
However,thecorrectthingisthatthe%with%withlesscontenttakesthesameheightas<li>higher,andisaligned,likethis: 
How to solve this?
Leave ALL blocks of the same size using only CSS I do not know if it is possible (I do not know) since each line becomes independent, but each element of a line has a certain connection and can be used as a parameter to keep all the others (of the same line) with the same size.
The easiest way to achieve this result is to use Flex:
ul{
list-style: none;
padding: 0;margin: 0;
display: flex;
flex-wrap: wrap;
}
li{
width: 25%;
border: 5px solid black;
margin: 5px;
padding: 3px;
}<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi rerum doloremque laborum? </li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et quasi corporis sed fugit quibusdam, possimus ipsam animi ab molestias. Eos qui id sint mollitia amet officiis, commodi natus officia libero.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul> display: flex by default will already leave all elements of the same size but you lose control over its width it will try to leave everything on the same line, disrespecting the defined width or boundaries of the parent element or page be resolved using flex-wrap , which allows you to break the line as soon as the elements exceed the screen.
There's an alternative, but it does not solve 100%.
You can set the min-height property to a value according to content. Eg: if your major li has 200px, set:
li {
min-height: 200px;
}