Using is-vertical with extra-data

[tiagomenegaz]

I have a vertical sequence of steps working fine. However, the content from the extra-data section is over the main content from the steps-content resulting in the following scenario:

I expected that the statement This snippet overflows from step 3, and stays right-aligned. were placed on the left the number 1. Am I expecting a non-supported result?

<ul class="steps custom-step-style is-vertical is-dashed is-medium">
  <li class="steps-segment">
    <span href="#" class="steps-marker">1</span>
    <div class="steps-content">
      <span class="is-size-3 is-uppercase has-tomato-color">Módulo 1</span>
      <br>
      <span class="is-size-5 has-text-weight-semibold has-tomato-color">Introdução</span>

      <p>
        <strong>Aula 1:</strong>Apresentação do curso
      </p>

      <p>
        <strong>Aula 2:</strong>Como fazer perguntas?
      </p>

      <p>
        <strong>Aula 3:</strong>O que é e como entrar no grupo fechado do Facebook
      </p>

      <p>
        <strong>Aula 4:</strong>O que é e como participar do nosso Slack
      </p>
    </div>
    <div class="extra-data has-overflow-left has-tomato-color">
      <span>This snippet overflows from step 3, and stays right-aligned.</span>
    </div>
  </li>
</ul>

This is more similar to what I want to do

[octoshrimpy]

Yes, this was not planned to work that way, however I will see what I can do about that.

[tiagomenegaz]

Yes, this was not planned to work that way, however I will see what I can do about that.

Thank you. I appreciate your response.