Line separator missing on removing a div

Issue

I'm having an HTML code In which I'm showing a line in between the elements as shown in the below code snippet.

 .iqalJN{
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    margin-bottom: 2rem; 
    column-gap: 2rem;
 }
 .btn-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.5rem;
}
 
 hr{ 
    width: 100%;
    border: none;
    border-top: 1px solid black;
 }
  

 
  
  <section class="sc-jSMfEi iqalJN">
  <div class="btn-container"></div>
  <p>Showing 1 to 20 of 87 Results</p>
  <hr/>
  <form>
    <label for="sort">sort by</label><select name="sort" id="sort" class="sort-input">
      <option value="Price: High to Low">Price: High to Low</option>
      <option value="Price: Low to High">Price: Low to High</option>
      <option value="Name: A-Z">Name: A-Z</option>
      <option value="Name: Z-A">Name: Z-A</option>
    </select>
  </form>
</section> 

And when I remove the div, the line is disappearing, please run the below snippet to see the result.

 .iqalJN{
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    margin-bottom: 2rem; 
    column-gap: 2rem;
 }
 .btn-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.5rem;
}
 
 hr{ 
    width: 100%;
    border: none;
    border-top: 1px solid black;
 }
  

 
  
  <section class="sc-jSMfEi iqalJN">
   <p>Showing 1 to 20 of 87 Results</p>
  <hr/>
  <form>
    <label for="sort">sort by</label><select name="sort" id="sort" class="sort-input">
      <option value="Price: High to Low">Price: High to Low</option>
      <option value="Price: Low to High">Price: Low to High</option>
      <option value="Name: A-Z">Name: A-Z</option>
      <option value="Name: Z-A">Name: Z-A</option>
    </select>
  </form>
</section> 

I am confused about how can I show the line with p pushed towards the left as the first element.

with div, it should show div p hr form. without div it should show p hr form

please let me know how can I achieve this.

Thanks

Solution

change your parent element CSS! so just change the grid-template-columns
from ❌auto auto 1fr auto to ✅auto 1fr auto

because by deleting that element, now the auto width grid element becomes the <hr> HTML element, and here is the problem.

so delete just the that auto keyword and you solved it!

for more details, here the documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

/* parent */

.iqalJN {
    display: grid;
    /* here the solution */
    grid-template-columns: auto 1fr auto;
    align-items: center;
    margin-bottom: 2rem;
    column-gap: 2rem;
}

.btn-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.5rem;
}

hr {
    width: 100%;
    border: none;
    border-top: 1px solid black;
}

<section class="sc-jSMfEi iqalJN">
        <p>Showing 1 to 20 of 87 Results</p>
        <hr/>
        <form>
            <label for="sort">sort by</label><select name="sort" id="sort" class="sort-input">
           <option value="Price: High to Low">Price: High to Low</option>
           <option value="Price: Low to High">Price: Low to High</option>
           <option value="Name: A-Z">Name: A-Z</option>
           <option value="Name: Z-A">Name: Z-A</option>
         </select>
        </form>
    </section>

Answered By - Laaouatni Anas