O alinhamento do elemento não está aparecendo conforme esperado

Oii, Diego. Como vai?

O problema acontece porque você está utilizando a classe is-flex para criar um container flexível para os elementos, mas não está definindo a largura dos elementos filhos corretamente. Para corrigir isso, você pode adicionar a classe is-flex-shrink-0 aos elementos filhos para que eles não sejam redimensionados automaticamente.

Aqui está o código que você pode usar para isso:

<template>
  <div class="box">
    <div class="columns">
      <div class="column is-8" role="form" aria-label="Formulario para criação de uma nova tarefa.">
        <input type="text" class="input" placeholder="Qual a tarefa que deseja iniciar?">
      </div>

      <div class="column">
        <div class="is-flex is-align-items-center is-justify-content-space-between">
          <section>
            <strong>00:00:00</strong>
          </section>

          <button class="button is-flex-shrink-0">
            <span class="icon">
              <i class="fas fa-play"></i>
            </span>
            <span>Play</span>
          </button>

          <button class="button is-flex-shrink-0">
            <span class="icon">
              <i class="fas fa-stop"></i>
            </span>
            <span>Stop</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

Se outra dúvida surgir, estamos aqui!

Abraços!