Help in <hr> tag

Hey everyone, so I am working on a webpage which looks like this so far

image

Now I am trying to add a line below the elements, but on using


, the line isn’t complete, it’s something like this:

image

is there any way I can make the line complete, towards the end of left side?
My code:

  <div class="col s9 right-side">
  
        
      <div class="input-field col s6">
          <i class="material-icons prefix">search</i>
          <input id="search">
          <label for="search">Search</label>
      </div> 
      
    <button class="btn-align btn-large"> Some text</button> <hr/>
    
    


  </div>

Thanks in advance!

The <hr> line is as long as the width of its container.
To solve your problem, you should place the <hr> tag outside the main div like so:

<div class="col s9 right-side">
     ...
</div>
<hr/>

Alternatively, instead of using an <hr> tag you can simply add a bottom border to the main div, like so:

<div class="col s9 right-side" style="bottom-border: 1px solid black">
  ...
</div>