Decalage entre block

Bonjour tous,
Je debute en Html CSS, j'ai rencontré un probleme, que j'ai resolut mais je voudrai savoir si j'ai utilisé la bonne méthode

Ce que je fais

Décrivez ici votre code ou ce que vous cherchez à faire

    <section class="flexSport">
        <img src="/Data/Pictures/small/ski.jpeg" alt="skiman" title="A man who's skiing well" class="skiman"/>

        <p class="intro">"
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum." Section 1.10.32 du "De Finibus Bonorum et Malorum" de
      Ciceron (45 av. J.-C.) "Sed ut perspiciatis unde omnis iste natus error
      sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
      ipsa quae ab illo inventore veritatis et quasi architecto beatae vitaes."
        </p>
    </section>

.flexSport{
  display: flex;
  width: 80%;
  height: 195px;
  flex-direction: row;
  }

  .intro{
  font-size: 1em;
  font-family: Georgia, "Times New Roman", Times, serif;
  overflow: scroll;
  border: 6px dotted blanchedalmond;
  width: 80%;
  height: 210px;
  margin-top: auto;
  }

.skiman {
  width: 259px;
  height: 195px;
}

J'avais donc un decalage vertical entre mon bloc ou inline <img> et mon block intro que j'ai resolu grace au margin-top: auto; de ma class .intro, est ce la bonne maniere de proceder?