Side by side

<div class="side-by-side | flow-space-y-lg">
  <div class="side-by-side__visual">
    <div class="side-by-side__image | grid place-items-center bg-blue-100 border border-blue-300">
      <span class="text-sm text-blue-800/50">Geen afbeelding</span>
    </div>
    <div class="side-by-side__artifact" aria-hidden="true">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 693 162">
        <!-- SVG content -->
      </svg>
    </div>
  </div>
  <div class="side-by-side__content | flow">
    <h2>Side by side component</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum quas pariatur tenetur iste possimus ab excepturi
      quaerat eius? Deserunt aliquid consequatur nobis explicabo doloremque id? Velit in dicta architecto odio?
    </p>
    <p>
      <a href="javascript:void();" class="link link-cta | group text-red-500">
        <span>Button</span>
        <svg
          class="w-3.5 group-hover:translate-x-1 transition-transform"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
        >
          <!-- SVG content -->
        </svg>
      </a>
    </p>
  </div>
</div>