<div
  class="dropdown is-spaced event-options is-accent is-right dropdown-trigger"
>
  <div>
    <div class="button">
      <i data-feather="settings"></i>
    </div>
  </div>
  <div class="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">
        <div class="media">
          <i data-feather="calendar"></i>
          <div class="media-content">
            <h3>View Event</h3>
            <small>Open event details.</small>
          </div>
        </div>
      </a>
      <a class="dropdown-item">
        <div class="media">
          <i data-feather="smile"></i>
          <div class="media-content">
            <h3>Owner</h3>
            <small>View owner details.</small>
          </div>
        </div>
      </a>
      <hr class="dropdown-divider" />
      <a href="#" class="dropdown-item">
        <div class="media">
          <i data-feather="delete"></i>
          <div class="media-content">
            <h3>Leave</h3>
            <small>Leave this event.</small>
          </div>
        </div>
      </a>
      <hr class="dropdown-divider" />
      <a href="#" class="dropdown-item">
        <div class="media">
          <i data-feather="flag"></i>
          <div class="media-content">
            <h3>Report</h3>
            <small>unappropriate content.</small>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>
