<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

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