title: how to force margin left to ion-button
body: <p>im trying to positionate the buttons on left, but i cant make it responsive.
  I want to do this:  <a href="https://i.stack.imgur.com/YJHJp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YJHJp.jpg" alt="no"></a></p>
  
  <p>here is my html:</p>
  
  <pre><code>&lt;div class="teste"&gt;
    &lt;div class="primeiro"&gt;
      &lt;ion-button fill="clear"&gt;
        &lt;span class="button-default"&gt;Parcialmente Exec.&lt;/span&gt;
      &lt;/ion-button&gt;
    &lt;/div&gt;
    &lt;div class="segundo"&gt;
      &lt;ion-button fill="clear"&gt;
          &lt;span class="button-default"&gt;Em aberto&lt;/span&gt;
      &lt;/ion-button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my css:</p>
  
  <pre><code>  .card-header {
      display: flex;
      margin-bottom: 17px;
      border: blue 1px solid;
      .teste{
        margin-left: auto;
        border: red solid 2px;
      }
      .primeiro{
        border: purple solid 2px;
      }
      .segundo{
        border: orangered solid 2px;
      }
      ion-button {
        // margin-left: auto;
        height: 25px;
        max-width: 140px;
        border-radius: 12.5px;
        background-color: $warning;
        color: #ffffff;
        text-transform: capitalize;
      }
    }
  </code></pre>
  
  <p>this is what a i got so far <a href="https://i.stack.imgur.com/dETlg.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dETlg.jpg" alt="no again"></a></p>