How to break line after button in Angular with Materialize?

Question

Making a small page using Angular, I came across a problem of overlapping two buttons. When they are on screens more than 420 px wide (cell phone in horizontal position, for example), it does not become a problem, and the buttons are positioned as shown below:

But, when you are with a device of less than 420 px of horizontal size (Blackberry Z30, for example), the page does not break the line, but overlaps the buttons, as in the image below:

What I wanted is that when you used a device with this configuration, if you broke the line, getting both buttons below each other. As you can see in the HTML below, I have already used a span an entire line to separate the buttons from the other fields (so they don’t overlap the fields).

Page structure:

<div class="container">
  <form class="">
    <div class="row">
      <!-- campos do formulário -->

      <span class="col s12"></span>

      <div class="input-field col s4">

        <a class="btn-large red">cancelar</a>
      </div>
      <div class="input-field col s4">
        <button class="btn-large blue" type="submit">Cadastrar</button>
      </div>
    </div>
  </form>
</div>

I kept the CSS of the empty page component.

I’m using Angular 8 and Materialize CSS.

Edit: I was able to avoid overlaying the buttons by removing them from the containers, in this way:

<!-- original -->
<div class="input-field col s4">

  <a class="btn-large red">cancelar</a>
</div>
<div class="col s4">
    <button class="btn-large blue" type="submit">Cadastrar</button>
</div>
<!-- modificado -->
<a class="col s4 btn-large red">cancelar</a>
<button class="col s4 push-s5 btn-large blue" type="submit">Cadastrar</button>

But they still don’t break the line by getting too close, and now they twist until they become a colored scratch in the middle of the screen.

Answer 1

To solve the problem, I created in the component’s CSS a class called bloco:

.bloco{
  display: block;
  min-width: 10em;
}

And added the class to both buttons (creating a span to separate them):

<a class="col s4 btn-large red bloco" [routerLink]="['/bank-accounts']">cancelar</a>
<span class="col s1"></span>
<button class="col s4 push-s5 btn-large blue bloco" type="submit">Cadastrar</button>

Since the class basically creates a minimum size for the component, this caused the objects not to overlap when arriving too close to each other, generating the following result: