This is one reason I'm not really into utility frameworks. They are able to deal with "appearance" part of the CSS just fine, but layout part is too rigid and inflexible.

You can use plain old CSS for layout purposes and mix it with utility classes for appearance.

You can do:

    <div class="actions">
        <button class="h-10 px-6 font-semibold rounded-md bg-black text-white" type="submit">
          Buy now
        </button>
        <button class="h-10 px-6 font-semibold rounded-md border border-gray-200 text-gray-900" type="button">
          Add to bag
        </button>
      </div>

And then:

    .actions {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .actions > * + * {
        margin-left: 16px; // or better use var from tailwind to set sizes consistently.
        @apply: ml-5; // or do this https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply
    }

This should combine those techniques, but I haven't used it in practice. And I'm sure in this case you will be labeled as heretic by both people who don't use utility frameworks and those who do ;)

Tailwind has gap-[0] for flex and grid, and space-[0] for the “owl selector” approach.

[0]: https://tailwindcss.com/docs/gap

[1]: https://tailwindcss.com/docs/space