I'm facing this issue:I'm looking to use position:absolute, to adjust the span.materias__item-detalle, to bottom of the div, without caring the size that the h4 occupes.But, I also want to use flexbox justify-content:space-between to give them a disposition.I tried it with display:flex and display:inline-flex
Would you mind help me?Thanks!
[problem][1][1]: https://i.sstatic.net/9VwqUIKN.png
Here the code:
#materias_container { padding: 2rem; background-color: rgb(63, 71, 204); #materias_lista { width: 100%; display: flex; justify-content: space-around; flex-wrap: wrap; li { list-style: none; div.materias__item { width: 390px; height: 220px; font-size: 20px; border-radius: 12px; border: 5px solid rgb(1, 74, 23); background-color: rgb(35, 177, 77); box-shadow: 6px 6px 6px black; padding: 20px; margin: 10px; position: relative; h4 { margin-top: 10px; } span.estado_promocionada, span.estado_cursando, span.estado_pendiente { display: block; width: fit-content; padding: 5px; border-radius: 15px; display: grid; justify-self: flex-end; border: 2px solid black; } span.estado_promocionada { background-color: rgb(0, 251, 96); } span.estado_cursando { background-color: rgb(229, 255, 0); } span.estado_pendiente { background-color: rgb(89, 90, 89); } .materias__item-detalle { width: 100%; display: inline-flex; justify-content: space-between; align-items: center; position: absolute; bottom: 4%; } } } }}<div id="materias_container"><ul id="materias_lista"><li><div class="materias__item"><span class="estado_promocionada">Promocionada</span><h4>Técnicas de Programación</h4><p class="materias__item-detalle"><span> Código: <!-- -->1.1.1</span></p></div></li><li><div class="materias__item"><span class="estado_promocionada">Promocionada</span><h4>Elementos de Análisis Matemático</h4><p class="materias__item-detalle"><span> Código: <!-- -->1.1.2</span><span>📚 Apuntes</span></p></div></li></ul></div>