durfdoen-2.0/layouts/verenigingen.erb

<div class="split-2">
  <div class="split-2-1">
    <h1 class="split-title"> Thema's </h1>
    <div class="tile-grid">
      <% for thema in themas %>
        <div class="tile clickable tile--medium tile--blue" onclick="window.location.href = '<%= thema.path %>'">
          <div class="tile__image tile__image--svg">
            <%= @items["/assets/themas_icon/"+thema[:naam]+".svg"].compiled_content %>
          </div>
          <p class="tile__title tile__title--medium"> <%= thema[:naam] %> </p>
        </div>
      <% end %>
    </div>
  </div>
  <div class="split-2-2">
    <h1 class="split-title"> Konventen </h1>
    <div class="tile-grid">
      <% for item in konventen %>
        <div class="tile clickable tile--medium" onclick="window.location.href = '<%= item.path %>'">
          <img class="tile__image" src="https://dsa.ugent.be/api/verenigingen/<%= abbreviation(item) %>/logo?size=medium" alt="<%= item[:naam] %>">
          <p class="tile__title tile__title--medium"> <%= item[:titel] || item[:naam] %> </p>
        </div>
      <% end %>
    </div>
  </div>
</div>

<style>
  .flex-horz {
    display: flex; /* or inline-flex */
    flex-direction: row;
  }
  .horz-child {
    flex-basis: auto;
    flex-grow: 1;
  }
</style>