Struggling to get words and Images inline

enter image description hereI am trying to get text underneath the images and have the images inline, I am getting them in line to make a slide show. Please see my code below

HTML:

<div class="slideshow-container">

    <div class="mySlides fade">
      <img src="images/British citizenship and Immigration.jpg" alt="British citizenship and Immigration Images">
      <div class="text"><h6>British citizenship and
        Immigration 
        </h6>
      </div>

    <div class="mySlides fade">
        <img src="images/Australian Migration.jpg" alt="Australian Migration Images">
        <div class="text"><h6>Australian Migration</h6>
          <p class = "sent">Our team can assist with a range of Australian visa solutions. Our expert knowledge ensures you receive the best advice for your personal circumstances. </p>
        </div>
      </div>

        <img src="images/Citizenship by investment.jpg" alt="Australian Migration Images">
        <div class="text"><h6>Citizenship-by-investment</h6>
          <p class = "sent">Enjoy the exclusive privileges that dual citizenship and international investment can provide. Our consultants can help you select the right programme and guide you every step of the way. </p>
        </div>

      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>
      
  </div>
  </div>

CSS

.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
  }

  .mySlides
  {
      display: flex;
  }

I have tried display grid with grid-template-columns, the text does not go underneath and that does not seem to work.

Anyone have a solution?

Try to add display: inline-block on the actual Elements( that is the image and the word)