Display Flex hakkında ufak bir soru

Bir div düşünün, içinde 3 eleman var. Birisi h2, birisi p, birisi img. Hepsi bir div olan mainSec'in altında. mainSec'i display flex yaptığımda 3ü yan yana geliyor, peki ben 2. eleman olan p'yi bir aşağı taşımak istersem ve h2 ile img'nin yan yana olmasını istersem ne yapmam gerekir?

CSS'le alakam yok baştan diyeyim ben şöyle yapardım. Main div içinde 2 div yan yana olmasını istediklerinizi ilke diğerini 2.sine koyarım. 2.divi ise centerlarım

<div class="mainSec">  <h2>Başlık</h2>  <p>Paragraf içeriği</p>  <img src="resim.png" alt="Resim Açıklaması">
</div>

.mainSec { display: flex; flex-direction: column; /* İç elemanları dikey yönde hizalayacak */
}
.mainSec h2, .mainSec img { display: inline-block; /* h2 ve img'yi yatayda yan yana olacak şekilde hizalayacak */
}
.mainSec p { margin-top: 10px; /* p elemanını üstten 10px aşağı taşıyacak */
}

Bu şekilde, mainSec'in içindeki elemanlar dikey olarak hizalanacak ve p elemanı h2 ve img elemanlarının altına yerleştirilecektir. h2 ve img elemanları ise yatayda yan yana olacaktır. Dilerseniz CSS'de verilen margin değerini değiştirerek p elemanının altındaki boşluğu ayarlayabilirsiniz.

diyor chat gpt

Bu işe yaramadı hocam.
Çok teşekkürler hocam, bu şekilde hallettim. Ufacık bir şeyi düşünememişim