Bulma Faq Components

<section class="section has-background-light is-clipped">
  <div class="container">
    <h2 class="title mb-16">FAQs</h2>
    <div class="mb-4 py-4 pr-10 has-background-white">
      <div class="columns">
        <div class="column is-narrow">
          <div style="height: 100%; width: 1px; border-left: 2px solid #3665F3;"></div>
        </div>
        <div class="column is-narrow py-6 pl-8 pl-16-tablet pl-28-desktop is-align-self-center">
          <h2 class="title is-5 mb-0">Sed eget accumsan ipsum. Praesent dignissim?</h2>
          <p class="is-hidden mt-8 has-mw-2xl has-text-grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
        </div>
        <div class="column ml-auto is-narrow">
          <button class="button is-ghost">
            <svg width="18" height="10" viewbox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16.0185 0.201172C16.2905 -0.0668276 16.7275 -0.0668276 16.9975 0.201172C17.2675 0.469172 17.2685 0.902172 16.9975 1.17017L9.0895 9.00017C8.8195 9.26817 8.3825 9.26817 8.1105 9.00017L0.2025 1.17017C-0.0674999 0.902172 -0.0674999 0.469172 0.2025 0.201172C0.4735 -0.0668278 0.9115 -0.0668278 1.1815 0.201172L8.6005 7.34217L16.0185 0.201172Z" fill="#1F40FF"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
    <div class="mb-4 py-4 pr-10 has-background-white">
      <div class="columns">
        <div class="column is-narrow">
          <div style="height: 100%; width: 1px; border-left: 2px solid #3665F3;"></div>
        </div>
        <div class="column is-narrow py-6 pl-8 pl-16-tablet pl-28-desktop is-align-self-center">
          <h2 class="title is-5 has-text-info mb-0">After curabitur eu laoreet libero eget en vel odio?</h2>
          <p class="mt-8 has-mw-2xl has-text-grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
        </div>
        <div class="column ml-auto is-narrow">
          <button class="button is-ghost">
            <svg width="18" height="10" viewbox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.18072 9C0.90872 9.268 0.471719 9.268 0.201719 9C-0.0682816 8.732 -0.069281 8.299 0.201719 8.031L8.10972 0.201C8.37972 -0.0670004 8.81672 -0.0670004 9.08872 0.201L16.9967 8.031C17.2667 8.299 17.2667 8.732 16.9967 9C16.7257 9.268 16.2877 9.268 16.0177 9L8.59872 1.859L1.18072 9Z" fill="#1F40FF"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
    <div class="mb-4 py-4 pr-10 has-background-white">
      <div class="columns">
        <div class="column is-narrow">
          <div style="height: 100%; width: 1px; border-left: 2px solid #3665F3;"></div>
        </div>
        <div class="column is-narrow py-6 pl-8 pl-16-tablet pl-28-desktop is-align-self-center">
          <h2 class="title is-5 mb-0">A eget euismod dignissim, felis tortor mollis ultricies turpis eget leo?</h2>
          <p class="is-hidden mt-8 has-mw-2xl has-text-grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
        </div>
        <div class="column ml-auto is-narrow">
          <button class="button is-ghost">
            <svg width="18" height="10" viewbox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16.0185 0.201172C16.2905 -0.0668276 16.7275 -0.0668276 16.9975 0.201172C17.2675 0.469172 17.2685 0.902172 16.9975 1.17017L9.0895 9.00017C8.8195 9.26817 8.3825 9.26817 8.1105 9.00017L0.2025 1.17017C-0.0674999 0.902172 -0.0674999 0.469172 0.2025 0.201172C0.4735 -0.0668278 0.9115 -0.0668278 1.1815 0.201172L8.6005 7.34217L16.0185 0.201172Z" fill="#1F40FF"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
    <div class="mb-4 py-4 pr-10 has-background-white">
      <div class="columns">
        <div class="column is-narrow">
          <div style="height: 100%; width: 1px; border-left: 2px solid #3665F3;"></div>
        </div>
        <div class="column is-narrow py-6 pl-8 pl-16-tablet pl-28-desktop is-align-self-center">
          <h2 class="title is-5 mb-0">Curabitur elementum eu metus ut consequat?</h2>
          <p class="is-hidden mt-8 has-mw-2xl has-text-grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
        </div>
        <div class="column ml-auto is-narrow">
          <button class="button is-ghost">
            <svg width="18" height="10" viewbox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16.0185 0.201172C16.2905 -0.0668276 16.7275 -0.0668276 16.9975 0.201172C17.2675 0.469172 17.2685 0.902172 16.9975 1.17017L9.0895 9.00017C8.8195 9.26817 8.3825 9.26817 8.1105 9.00017L0.2025 1.17017C-0.0674999 0.902172 -0.0674999 0.469172 0.2025 0.201172C0.4735 -0.0668278 0.9115 -0.0668278 1.1815 0.201172L8.6005 7.34217L16.0185 0.201172Z" fill="#1F40FF"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
    <div class="mt-20 has-text-centered"><a class="button is-info" href="#">More</a></div>
  </div>
</section>