Estoy intentado posicionar dos elementos adentro de una card para un proyecto, y no comprendo el motivo por el cual no se comportan de la manera "esperable".
Intente solucionarlo con margin, pero no me parece la solución mas practica (se que me va traer problemas mas adelante).
Espero que sea legible Jsfiddle, ya que extrapole parte del código para que se vea más limpio el problema.
#container-card {
background: pink;
display: flex;
flex-direction: column;
overflow: scroll;
height: 95%;
}
.card-recipe {
background: lightblue;
margin: .5em;
max-height: 15em;
max-width: 100%;
height: 12em;
}
.img-recipe,
.content-card__recipe {
display: inline-block;
margin: 0 auto;
height: 100%;
}
.img-recipe {
width: 50%;
background: violet;
}
.imagen {
width: 100%;
height: 100%;
}
.content-card__recipe {
background: lightgreen;
height: 100%;
width: 45%;
}
<section id="container-card">
<div class="card-recipe">
<div class="img-recipe">
imagen
</div>
<div class="content-card__recipe">
<div class="card-title">
<h4>Titulo de la tarjeta<h4>
</div>
</div>
</div>
</section>