Tengo una tarea en la que necesito colocar una imagen y un encabezado en un div con un ancho fijo que cambia de altura cada vez. Debe verse como la captura de pantalla a continuación, pero no tengo idea de cómo obtener ese aspecto.

Las secciones son donde comienza el flexbox y organicé los elementos secundarios para que aparecieran como deberían, pero todo lo que hay dentro de eso, no puedo ponerme a trabajar. HTML

 <main class="card-grid"> <section class="row-grid"></section> <section class="col-grid"> <div class="card" style="width: 200px; height: 280px;"> <img src="littlecolorado.jpg"> <h2>Another card</h2></div> </section> </main>

CSS

 .col-grid { display: flex; flex-flow: column wrap; gap: 20px; height: 2000px; } .col-grid div img { width: 200px; } .col-grid div h2 { display: block; }

Mi archivo:

Cómo debería verse: