how to make a full width button inside card in materializecss?

I'm trying to get a full width button inside my materialize css card and I've achieved the following result so far.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="row">
  <div class="col s12">
    <div class="card teal lighten-4">
      <div class="card-content">


        <article id="post-946650" class="post-946650 page type-page status-publish hentry">
          <p><input id="id_func_calc" type="hidden" value="[[{&quot;assign&quot;:[&quot;#_z&quot;],&quot;eval&quot;:&quot;#y/#x&quot;}]]">
          </p>
          <div class="mathquill-embedded-latex mathquill-rendered-math"><span class="text">Travel time(in minutes)</span>
            <input id="x" class="oInp" size="3" type="text" autocomplete="off"><br>
            <span class="text">Miles to destination</span> <input id="y" class="oInp" size="3" type="text"><br>
            <span class="text">Avg speed</span> <input id="_z" class="oInp oOutp" disabled="disabled" size="3" type="text" style="width: 3em;">
          </div>
          <p><input class="clcbtn waves-effect waves-light btn col s12" type="button" value="Solve"></p>
        </article>


      </div>

    </div>
  </div>
</div>

But the issue is the button is not inside the card and only half. Any help is appreciated.

Solution

Add row to the 4th div which is with the class name card-content

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    
    <div class="row">
      <div class="col s12">
        <div class="card teal lighten-4">
          <div class="card-content row">
            <article id="post-946650" class="post-946650 page type-page status-publish hentry">
              <p><input id="id_func_calc" type="hidden" value="[[{&quot;assign&quot;:[&quot;#_z&quot;],&quot;eval&quot;:&quot;#y/#x&quot;}]]"></p>
              <div class="mathquill-embedded-latex mathquill-rendered-math">
                  <span class="text">Travel time(in minutes)</span>
                  <input id="x" class="oInp" size="3" type="text" autocomplete="off"/><br>
                
                  <span class="text">Miles to destination</span> 
                  <input id="y" class="oInp" size="3" type="text"><br>
                
                  <span class="text">Avg speed</span> 
                  <input id="_z" class="oInp oOutp" disabled="disabled" size="3" type="text" style="width: 3em;"><br>
                
                  <p><input class="clcbtn waves-effect waves-light btn col s12" type="button" value="Solve"></p>
                
              </div>
            </article>
          </div>
        </div>
      </div>
    </div>