Подскажите пожалуйста: почему картинка занимает всю строку, а теги

переходят на новую строку?

Вот так работает:

.mainDescription {
  grid-template-areas: 'logoInDescription textInDescription';
  grid-template-columns: 500px 600px;
}

.logoInDescription {
  grid-area: 'logoInDescription';
  display: inline-block;
}

.textInDescription {
  grid-area: 'textInDescription';
  display: inline-block;
}

#logoInDescriptionId {
  height: 500px;
}

#headerOfTextInDesc {}

#mainOfTextInDesc {}

<div class="mainDescription">
  <div class="logoInDescription">
    <img src="zvezda.jpg" alt="" id="logoInDescriptionId">
  </div>
  <div class="textInDescription">
    <p id="headerOfTextInDesc">какой-то текст, какой-то текст!</p>
    <p id="mainOfTextInDesc">какой-то текст, какой-то текст! какой-то текст, какой-то текст! какой-то текст, какой-то текст! какой-то текст, какой-то текст! какой-то текст, какой-то текст!</p>
  </div>
</div>