Positioning div inside div using css grid

Question

I have section under my banner. It have background and its divided to three elements. Using grid i made them to position inline, but my first section have image than text and then img again, second section have image and text and the third is only text. The go like you can see belowe, how can i position everything inline ? I don't really get the idea of values in grid, how and when to use, can you explain this to me ?

Here is the code:

.banner-under {
  background-color: #edf1f3;
  height: 102px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
  -ms-grid-row: 1;
  grid-row: 1;
}

.banner-under .banner-content {
  z-index: 2;
  text-align: center;
  height: 35px;
}

.banner-under .banner-content p {
  font-family: "Sintony";
  font-weight: 700;
  font-size: 14px;
  padding: 20px 5px;
}

.banner-under .banner-content h3 {
  font-family: "Sintony";
  font-weight: 700;
  font-size: 35px;
}

.banner-under .banner-content img {
  height: 35px;
  padding-top: 10px;
}

.banner-under .banner-content span {
  color: #fea100;
}

@media (max-width: 996px) {
  .banner-under .banner-content {
    left: 20%;
  }
}

<div class="banner-under">
        <div class="banner-content" id="under-banner-first">
            <img src="https://via.placeholder.com/340C/O https://placeholder.com/" alt="">
            <p>READ
                <br><span>REVIEWS</span>
            </p>
            <img class="banner-arrow" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
        </div>
        <div class="banner-content">
            <img src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
            <p>CALL US NOW FOR
                <br><span>HOME DELIVERY</span>
            </p>
        </div>
        <div class="banner-content">
            <h3>1-088 005 006</h3>
        </div>
    </div>

Answer 1

You needed to tell the P tag to display as an inline block, otherwise it takes up 100% width automatically.

See here:

.banner-under .banner-content p {
   font-family: "Sintony";
   font-weight: 700;
   font-size: 14px;
   padding: 20px 5px;
   display: inline-block;
}

And here is a snippet of all of your code compiled with this (click the blue button at the bottom to see it working

.banner-under {
  background-color: #edf1f3;
  height: 102px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
  -ms-grid-row: 1;
  grid-row: 1;
}

.banner-under .banner-content {
  z-index: 2;
  text-align: center;
  height: 35px;
}

.banner-under .banner-content p {
  font-family: "Sintony";
  font-weight: 700;
  font-size: 14px;
  padding: 20px 5px;
  display: inline-block;
}

.banner-under .banner-content h3 {
  font-family: "Sintony";
  font-weight: 700;
  font-size: 35px;
}

.banner-under .banner-content img {
  height: 35px;
  padding-top: 10px;
}

.banner-under .banner-content span {
  color: #fea100;
}

@media (max-width: 996px) {
  .banner-under .banner-content {
    left: 20%;
  }
}

<div class="banner-under">
        <div class="banner-content" id="under-banner-first">
            <img src="https://via.placeholder.com/340C/O https://placeholder.com/" alt="">
            <p>READ
                <br><span>REVIEWS</span>
            </p>
            <img class="banner-arrow" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
        </div>
        <div class="banner-content">
            <img src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
            <p>CALL US NOW FOR
                <br><span>HOME DELIVERY</span>
            </p>
        </div>
        <div class="banner-content">
            <h3>1-088 005 006</h3>
        </div>
    </div>